Sommario
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.jsRichiamando il nostro documento dal nostro browser otteniamo il seguente risultato:
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.jsNotiamo 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
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 condizionaleNella 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:
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
