HTML and CSS Reference
In-Depth Information
Come si evince da questi esempi, grazie al binding, KnockoutJS ci permette di eliminare
molto codice legato alla manipolazione degli oggetti, permettendoci di lavorare esclusiva-
mente con i dati. Questa è una freccia molto potente nel nostro arco.
Grazie al binding, KnockoutJS permette anche di mantenere legate liste di oggetti Ja-
vaScript a una lista di elementi nell'HTML. Questo torna utile quando vogliamo permettere
all'utente di visualizzare e modificare i valori in una tabella o in una lista.
Supponiamo che l'utente debba inserire una lista di nomi. Nel ViewModel creiamo un
tipo di observable specializzato per le liste: observableArray . Nel codice HTML usiamo il
custom binding foreach per specificare che il codice HTML, al suo interno, deve essere
ripetuto per ogni elemento dell'observable. Premendo il tasto aggiungi, l'utente aggiunge
un elemento all'observable.
A questo punto, visto che nell'HTML abbiamo legato la lista e l'observable, Knoc-
koutJS genera in automatico una nuova riga nella lista mentre, se eliminiamo un nome
dall'observable, la relativa riga nella lista viene cancellata.
Questo è possibile grazie al binding e al templating cioè alla possibilità di creare di-
namicamente frammenti di codice HTML (nel nostro caso le righe della lista dei nomi).
Nell'esempio 11.16 possiamo sperimentare il caso in questione.
Esempio 11.16
//Javascript
function TestViewModel() {
var self = this;
self.names = ko.observableArray([
{ name: "Stefano Mostarda" },
{ name: "Daniele Bochicchio" }
]);
self.addName = function() {
self.names.push({
name: "Nuovo Nome " + new Date().getSeconds()
});
};
self.removeName = function() {
self.names.remove(this);
}
}
 
Search WWH ::




Custom Search