Comprensione dell'associazione dati in Knockout.js

Associazione dati non è altro che l'unione di dati dinamici sia testo che HTML nelle diverse parti dell'albero SOLE del nostro documento in cui abbiamo Knockout.js funzionante, questo ci consente di generare contenuti dinamici da viste e modelli.
Questo concetto può essere trovato in un gran numero di framework di sviluppo per JavaScript poiché è un modo molto efficace per esprimere la logica di sviluppo, quindi è di vitale importanza capire come funziona e come può semplificarci la vita quando realizziamo le nostre applicazioni.
RequisitiIl requisito principale è essere in grado di eseguire Knockout.js se l'abbiamo scaricato o incluso da a CDN. Avremo anche bisogno di un server di stile Apache per servire la nostra pagina e un editor di testo come Testo sublime o NotePad ++ per creare i documenti che le nostre applicazioni porteranno.
Il modo migliore per vedere il Associazione dati è con un esempio, vediamo nel codice seguente come abbiamo creato un documento HTML dove includiamo Knockout.js, poi nel nostro corpo abbiamo creato un'etichetta H1 in esso facciamo un associazione dati di HTML, questo significa che è in attesa del codice HTML.
Nella parte JavaScript semplicemente quello che abbiamo fatto è stato creare un vista-modello e in esso definire alcuni attributi per poter lavorare con esso. La cosa interessante è che questo ci permette di passare i dati dal nostro vista-modello a una parte dell'HTML. Vediamo come si presenta il nostro codice:

 Associazione dati in knockout.js 

Richiamando il nostro documento dal nostro browser otteniamo il seguente risultato:

Qui vediamo come abbiamo costruito un metodo che restituisce il nome e un po' di HTML per dargli stile, questo significa che possiamo avere una gamma infinita di possibilità, ma forse ciò che colpisce di più è che possiamo applicare un associazione dati a quasi tutti gli articoli. Quindi possiamo inviare testo, HTML, ecc.
Ma non solo ciò che ci permette è di stampare il testo per l'utente, possiamo anche incorporare CSS, classi e attributi alle nostre etichette HTML, permettendoci di controllare quasi ogni aspetto della nostra pagina senza la necessità di impostare valori statici.
Vediamo nell'esempio seguente come diamo una classe speciale a un'etichetta HTML, l'idea è che possiamo generare stili dinamici senza la necessità di intervenire quando abbiamo un'applicazione che cerca un font RIPOSO, tuttavia in questo caso per semplificare andremo a caricare dinamicamente un solo componente:

 Associazione dati in knockout.js 
 

Notiamo quindi come possiamo passare un componente stile che definirà l'aspetto del testo, potremmo anche aggiungere una classe e infine chiamiamo il nostro testo dal modello, notiamo anche che facciamo tutto questo nello stesso associazione dati, separando solo i diversi elementi con virgole.
Se eseguiamo il nostro nuovo esempio, il risultato nel nostro browser è il seguente:

INGRANDIRE

Prestiamo particolare attenzione alla parte di debugger di HTML del browser, qui vediamo dove si trovano gli elementi del associazione dati sono stati effettivamente riportati sull'etichetta.
Ci sono altre funzionalità che possiamo usare con il associazione dati, uno di questi sono i condizionali, ovvero possiamo posizionare un elemento o un altro all'interno delle nostre etichette HTML tenendo conto delle diverse proprietà del nostro modello. Vediamo il seguente codice dove usiamo un esempio di questo stile:

 Associazione dati condizionale 
 

Nella nostra vista del modello abbiamo definito un attributo chiamato id che lo impostiamo a 0, quindi nel nostro HTML nella sezione di associazione dati Abbiamo definito un operatore ternario, dove specifichiamo se l'id della vista modello è 0 stampa 'Ciao' altrimenti stampa 'Arrivederci'.
Eseguiamo l'esempio nel browser per vederne il risultato:

Un esercizio interessante sarebbe se puoi cambiare l'id in un altro valore per confermare l'operazione, ecco perché lo lasciamo come un'attività.
Qualcosa di molto importante che dobbiamo prendere in considerazione è il contesto dei nostri elementi, questo perché Knockout.js utilizza una struttura gerarchica di Figlio del padre per gestire le diverse proprietà che otteniamo dalle viste del modello.
Ciò significa che lavoriamo sempre in base a un genitore, e quindi possiamo accedere alle sue proprietà, generando così proprietà del bambino che differiscono da altri bambini che sono allo stesso livello, potendo così incorporare valori diversi.
Poiché tutto è relativo al contesto vediamo che potremmo usare negli esempi precedenti il testo di associazione dati senza bisogno di indicare a chi appartenga, poiché quando ciò accade, Knockout.js assume immediatamente il contesto del bambino corrente. Vediamo di seguito i diversi tipi di contesto che possiamo gestire nella nostra applicazione:
$ radiceÈ il contesto principale, è da dove deriva la nostra vista del modello, quando invocato da qualsiasi parte della nostra applicazione cercherà sempre la relazione più gerarchica e con la precedenza più alta nella nostra struttura, è speciale per quando abbiamo molti bambini e vogliamo qualcosa dal genitore più anziano.
$ genitoreFunziona in modo simile a $ radice, con la differenza che si riferisce solo al genitore immediato del nostro elemento, quindi il suo ambito è limitato a quello, è ampiamente utilizzato quando lavoriamo con i cicli per ciascuno generare molti figli.
$ genitoriL'aggiunta del plurale a questo contesto ci dice che costruiamo una sorta di disposizione o array che contiene un indice per ciascuno dei genitori del bambino da dove lo chiamiamo, in questo modo $ genitori [0] è il padre immediato, $ genitori [1] è il genitore del genitore immediato e così via.
$ datiCi consente di accedere ai dati del contesto in cui siamo posizionati, viene generalmente utilizzato quando lavoriamo con contenuti variabili e abbiamo bisogno di accedere alle nostre proprietà di visualizzazione del modello.
$ indiceÈ accessibile solo quando lavoriamo con i loop per ciascuno e ci permette di accedere alle diverse posizioni del nostro elemento.
Quando abbiamo bisogno di iterare su un numero di elementi, è il momento in cui dobbiamo usare il ciclo per ciascuno, questo passerà attraverso un array o un elenco di elementi e in questo modo possiamo costruire il nostro elenco nel documento HTML.
Nell'esempio seguente avremo una proprietà chiamata libri nella nostra vista modello e quindi la attraverseremo con un per ciascuno facendo uso di una delle variabili di contesto, in questo caso $ dati, vediamo:

 Associazione dei dati per ogni

Se vediamo il risultato del browser noteremo l'operazione che si verifica tenendo conto di tutti i concetti che abbiamo appreso durante il tutorial.

Con questo finiamo questo tutorial, abbiamo imparato e avuto un contatto più approfondito con Knockout.js, è importante comprendere in modo molto profondo e solido i concetti di cosa sia il associazione dati, è già il modo in cui utilizzeremo i dati, gli attributi e le proprietà delle nostre viste del modello. Siamo stati anche in grado di capire un concetto molto importante come il contesto, ora possiamo capire come differiscono i diversi elementi e perché Knockout.js sa quando ottenere alcuni dati su altri, ed è perché conosce sempre il contesto dei nostri elementi.