Lavorare con i moduli in Knockout.js

I moduli sono parte integrante di qualsiasi applicazione o pagina Web, poiché è uno dei mezzi che ci consente di ottenere i dati dell'utente in modo nativo, questo rende l'elaborazione degli stessi un'attività molto comune.
Knockout.js ci permette di lavorare con il tuo oggetto associazione dati tutti gli elementi che possono costituire un form, dando così la possibilità di poter validare, innescare eventi, assegnare osservabili, ecc. Ciò rende l'elaborazione dei moduli lato client praticabile, quindi aggiungiamo un ulteriore livello di convalide prima che raggiunga il lato server.
RequisitiAvremo solo bisogno di avere Knockout.js nel nostro sistema e accessibile alle applicazioni che andremo a creare, permessi per scrivere file, una connessione Internet per ottenere le librerie se non le abbiamo e un editor di testo come Testo sublime o Blocco note ++. Per eseguire le applicazioni abbiamo bisogno di un tipo di server web Apache o Nginx nel nostro ambiente di test.
Prima di passare agli esempi con casi che possiamo applicare, è molto importante conoscere il data-bind che può funzionare con gli elementi del modulo della nostra applicazione, in questo modo possiamo iniziare a farci un'idea di ciò che possiamo e non possiamo ottenere, in particolare i modi in cui possiamo ottenere i risultati di cui abbiamo bisogno per far funzionare correttamente la nostra applicazione:
Valore di associazione datiQuesto è usato nei valori o negli elementi di input di selezione, possono essere gli elementi di input, textarea o select, con questo possiamo catturare il valore dell'elemento nel momento in cui dobbiamo usarlo.
Associazione dati textInputest legame viene utilizzato con gli elementi input e textarea, la sua funzione è simile a valore Tuttavia, se gli assegniamo un osservabile, possiamo catturare i valori mentre l'utente interagisce con l'elemento, a differenza del valore che ci dà il valore quando l'elemento cambia, ad esempio quando perde il focus.
Associazione dati verificataSi usa con elementi del tipo casella di controllo sì tasti della radioCome indica il nome, ci consente di stabilire o sapere se un elemento è selezionato in una struttura che utilizza gli elementi menzionati.
Opzioni di associazione datiUsando questo legame Possiamo riempire un elemento selezionato con le opzioni che visualizzerà nel modulo, è perfetto quando vogliamo creare un catalogo di opzioni in modo dinamico.
Opzioni di associazione dati selezionateEsclusivo anche per l'elemento select, viene utilizzato quando è necessario impostare le opzioni selezionate durante l'impostazione della proprietà multi, poiché dobbiamo scegliere più di un'opzione alla voltaz.
Abilita / disabilita il binding dei datiCi consente di abilitare o disabilitare uno qualsiasi dei diversi elementi del modulo, con questo possiamo rimuovere un elemento se non è necessario utilizzarlo nel flusso dell'applicazione in una particolare condizione, dove abilitare serve per abilitare e disattivare disabilitare, nel caso non si conoscesse il significato di ogni parola.
Il più interessante di questi data-bind è che funzionano in due modi, ovvero quando c'è un cambiamento in un elemento possiamo riceverlo nella nostra vista del modello ed eseguire alcune elaborazioni se necessario, ma anche se abbiamo un osservabile e vogliamo fare qualcosa dall'applicazione al modulo possiamo anche senza alcun tipo di problema, a patto di utilizzare il associazione dati adatto al tipo di elemento della forma, poiché Knockout.js non interpreterà le istruzioni errate come potrebbe fare un browser con codice HTML.
Vediamo ora un esempio pratico di come possiamo utilizzare tutti i concetti di cui abbiamo parlato nella sezione precedente di questo tutorial, creeremo un elemento di tipo area di testo che accetterà solo 140 caratteri, poiché questa restrizione esiste, dobbiamo informare l'utente di quanti caratteri ha lasciato mentre scrive.
La logica che useremo è molto semplice, includeremo il data-bind textInput nell'elemento textarea del nostro form, quindi nella nostra vista modello lo imposteremo come osservabile, e quindi possiamo iniziare a catturare i caratteri mentre l'utente sta digitando. Infine usiamo un elemento calcolato Per creare un osservabile composito con il totale dei caratteri rimanenti, al momento non costringeremo l'utente a scrivere di meno, lo informiamo solo dei caratteri. Diamo un'occhiata al codice per il nostro esempio:

 Moduli in knockout.js
Inserisci un testo

Caratteri rimanenti: 

Va notato che non usiamo il valore di associazione dati perché abbiamo bisogno che la modifica della quantità di caratteri rimanenti avvenga nel momento in cui l'utente digita, poiché in caso contrario potremmo solo indicare la quantità nel momento in cui passa a un altro elemento e ciò non sarebbe ottimale per ciò a cui ci rivolgiamo quando si utilizza Knockout.jsTuttavia, ci saranno casi in cui questo tipo di comportamento è necessario, tutto dipende da ciò di cui ha bisogno la nostra applicazione. Quindi vediamo come appare il nostro esempio quando lo eseguiamo nel browser:

Ovviamente, qui non possiamo vedere dinamicamente come il nostro contatore diminuisce, ma quando scriviamo il nostro contatore di caratteri rimanenti, viene aggiornato come è scritto nell'elemento textarea del modulo:

Un altro aspetto di cui abbiamo spesso bisogno nelle nostre applicazioni quando si lavora con i moduli sono gli eventi, poiché con essi possiamo attivare azioni quando l'utente fa qualcosa in particolare, come un clic, o passa il mouse su una sezione specifica del nostro HTML. Vediamo alcuni degli eventi che possiamo utilizzare nei nostri moduli:
Invia eventoQuesto evento può essere utilizzato solo nell'elemento modulo, e viene attivato solo quando l'utente invia il modulo al server, tramite un input submit o con qualche altro metodo.
Fare clic su eventoQuesto evento è una vecchia conoscenza, poiché il suo nome indica che si attiva quando si fa clic su un elemento all'interno della nostra applicazione.
Evento HasFocusQuesto evento viene generato quando un elemento generalmente input, textarea o select viene selezionato dall'utente ed è attivo in quel momento.
C'è anche la possibilità di utilizzare altri eventi disponibili nel SOLE Per esempio passaggio del mouse, pressione dei tasti per estendere la funzionalità della nostra vista del modello a quei livelli.
Nel seguente esercizio applicheremo la conoscenza degli eventi che abbiamo acquisito, creeremo un piccolo modulo in cui avremo un elenco e ogni volta che passiamo il mouse su un'opzione, verrà visualizzata un'immagine visualizzato, ovviamente questa sarà un'implementazione dimostrativa e non è adatta per la produzione, tuttavia ci aiuta a capire su cosa stiamo lavorando.
In questo caso avremo inoltre bisogno Knockout.js la biblioteca di jQuery per utilizzare alcuni effetti nella nostra applicazione, quindi l'ideale è scaricarlo e salvarlo nella stessa cartella o directory in cui abbiamo Knockout.js, o magari usalo dal tuo CDN ufficiale. Vediamo allora il codice che ci serve:

 Moduli in knockout.js

Qui quello che abbiamo semplicemente fatto è creare un elenco di cose con una descrizione e un'immagine, questa immagine può essere ovunque accessibile dall'applicazione, in questo caso abbiamo scelto la sua directory principale, quindi creiamo una funzione che aggiunge l'immagine a un selettore con jQuery in modo che possiamo mostrare lo stesso nel SOLE.
Nella parte di HTML vediamo che abbiamo creato una lista con gli elementi appartenenti alla lista cose e infine indichiamo che l'evento è passaggio del mouse e la funzione da eseguire quando si verifica questo evento. Vediamo come appare la nostra applicazione quando la eseguiamo nel nostro browser:

Quindi se spostiamo il cursore del mouse su alcuni dei testi verrà caricata l'immagine corrispondente e potremo vedere la funzionalità del nostro esempio:

Naturalmente, trattandosi di un cambiamento dinamico, non possiamo apprezzare il cambiamento, ma se spostiamo il cursore sull'elemento superiore, l'immagine cambierà. Con questo abbiamo terminato questo tutorial, con il quale abbiamo approfondito il lavoro delle forme con Knockout.js, fornendoci strumenti per migliorare l'acquisizione e la convalida dei dati provenienti dai nostri utenti.