Share
Come abbiamo visto nelle lezioni precedenti, progettare una vista per un ViewModel è come creare un modello HTML per un oggetto JavaScript. Una parte integrante di qualsiasi sistema di template è la capacità di controllare il flusso dell'esecuzione del template. La possibilità di scorrere elenchi di dati e includere o escludere elementi visivi in base a determinate condizioni consente di ridurre al minimo il markup e offre un controllo completo sul modo in cui i dati vengono visualizzati.
Abbiamo già visto come per ciascuno binding può eseguire il looping di un array osservabile, ma Knockout.js include anche due binding logici: Se e se non. Inoltre, con il binding consente di modificare manualmente l'ambito dei blocchi del modello.
Questa lezione introduce i collegamenti del flusso di controllo di Knockout.js estendendo l'esempio del carrello acquisti dalla lezione precedente. Esploreremo anche alcune delle sfumature di per ciascuno che sono stati sorvolati nell'ultima lezione.
Accentsconagua
per ciascuno RilegaturaIniziamo dando uno sguardo più da vicino al nostro esistente per ciascuno ciclo continuo:
Quando Knockout.js incontra per ciascuno nel Dati-bind attributo, itera attraverso l'array shoppingCart e usa ogni elemento trovato per il contesto vincolante del markup contenuto. Questo contesto vincolante è il modo in cui Knockout.js gestisce l'ambito dei loop. In questo caso, è il motivo per cui possiamo utilizzare il nome e le proprietà del prezzo senza fare riferimento a un'istanza di Prodotto.
L'utilizzo di ciascun elemento in un array come nuovo contesto di binding è un modo conveniente per creare loop, ma questo comportamento rende anche impossibile fare riferimento a oggetti al di fuori dell'elemento corrente nell'iterazione. Per questo motivo, Knockout.js rende disponibili diverse proprietà speciali in ogni contesto di binding. Nota che tutte queste proprietà sono disponibili solo nel vista, non il ViewModel.
$ radice ProprietàIl $ radice contesto si riferisce sempre al ViewModel di livello superiore, indipendentemente dai loop o da altre modifiche nell'ambito. Come abbiamo visto nella lezione precedente, questo rende possibile accedere a metodi di alto livello per manipolare ViewModel.
$ data ProprietàIl $ data la proprietà in un contesto di binding si riferisce all'oggetto ViewModel per il contesto corrente. È molto simile al Questo parola chiave in un oggetto JavaScript. Ad esempio, all'interno del nostro ciclo foreach: shoppingCart, $ data si riferisce alla voce di elenco corrente. Di conseguenza, il codice seguente funziona esattamente come farebbe senza utilizzare $ data:
Questo potrebbe sembrare una proprietà banale, ma è indispensabile quando si sta iterando attraverso array che contengono valori atomici come stringhe o numeri. Ad esempio, possiamo memorizzare un elenco di stringhe che rappresentano i tag per ciascun prodotto:
funzione Product (nome, prezzo, tag) this.name = ko.observable (name); this.price = ko.observable (price); tags = typeof (tags)! == 'undefined'? tag: []; this.tags = ko.observableArray (tag);
Quindi, definire alcuni tag per uno dei prodotti nel carrello della spesa array:
nuovo prodotto ("Buns", 1.49, ['Baked goods', 'Hot dog']); Ora, possiamo vedere il contesto $ dati in azione. Nel
elemento contenente a
tag array: |
All'interno del foreach: tag loop, Knockout.js utilizza le stringhe native "Baked goods" e "Hot dog" come contesto vincolante. Ma, dal momento che vogliamo accedere alle stringhe reali anziché alle loro proprietà, abbiamo bisogno dell'oggetto $ data.
Indice $ ProprietàAll'interno di a per ciascuno ciclo, il Indice $ la proprietà contiene l'indice dell'articolo corrente nell'array. Come la maggior parte delle cose in Knockout.js, il valore di $ index si aggiorna automaticamente ogni volta che aggiungi o elimina un elemento dall'array osservabile associato. Questa è una proprietà utile se è necessario visualizzare l'indice di ciascun elemento, in questo modo:
$ genitore ProprietàIl $ genitore proprietà si riferisce all'oggetto ViewModel padre. In genere, ne avrai bisogno solo quando lavori con cicli nidificati e devi accedere alle proprietà nel ciclo esterno. Ad esempio, se è necessario accedere a Prodotto istanza dall'interno del ciclo foreach: tags, è possibile utilizzare la proprietà $ parent:
Tra matrici osservabili, il per ciascuno binding e le proprietà del contesto di binding discusse in precedenza, dovresti disporre di tutti gli strumenti necessari per sfruttare gli array nelle tue applicazioni web Knockout.js.
Prima di passare ai binding condizionali, aggiungeremo a sconto proprietà alla nostra classe di prodotto:
funzione Prodotto (nome, prezzo, tag, sconto) ... discount = typeof (sconto)! == 'undefined'? sconto: 0; this.discount = ko.observable (sconto); this.formattedDiscount = ko.computed (function () return (this.discount () * 100) + "%";, this);
Questo ci dà una condizione che possiamo verificare con i collegamenti logici di Knockout.js. Innanzitutto, facciamo il sconto parametro opzionale, dandogli un valore predefinito di 0. Quindi, creiamo un osservabile per lo sconto in modo che Knockout.js possa tracciare le sue modifiche. Infine, definiamo un osservabile calcolato che restituisce una versione user-friendly della percentuale di sconto.
Andiamo avanti e aggiungiamo uno sconto del 20% al primo elemento in PersonViewModel.shoppingCart:
this.shoppingCart = ko.observableArray ([nuovo prodotto ("Beer", 10.99, null, .20), nuovo prodotto ("Brats", 7.99), nuovo prodotto ("Buns", 1.49, ['Baked goods', ' Hot dog ']);]); se e se non AttacchiIl Se il legame è un legame condizionale. Se il parametro che si passa è true, verrà visualizzato l'HTML contenuto, altrimenti verrà rimosso dal DOM. Ad esempio, prova ad aggiungere la seguente cella al
| Hai salvato !!! | l'elemento apparirà solo per gli articoli che hanno uno sconto maggiore di 0. Inoltre, poiché lo sconto è osservabile, Knockout.js rivaluterà automaticamente la condizione ogni volta che cambia. Questo è solo un altro modo in cui Knockout.js ti aiuta a concentrarti sui dati che guidano la tua applicazione.  Figura 15: resa condizionale di uno sconto per ciascun prodotto Puoi usare qualunque Espressione JavaScript come condizione: Knockout.js proverà a valutare la stringa come codice JavaScript e utilizzare il risultato per mostrare o nascondere l'elemento. Come avrai intuito, il Il |
