HTML and CSS Reference
In-Depth Information
return this.firstName() + " " + this.lastName();
}, this);
}
Le proprietà esposte dalla classe
TestViewModel
non sono semplici proprietà bensì dei
cosiddetti
observable
, ovvero delle funzioni che espongono il valore della proprietà e che
permettono di impostarlo. Gli observable sono parte della magia che sta alla base di Knoc-
koutJS. La proprietà
fullName
è un tipo particolare di observable, in quanto è in sola
lettura perché calcolata.
Ora che abbiamo la classe, creiamo il codice HTML e vediamo come legare gli oggetti
alle proprietà della classe
nell'esempio 11.13
.
Esempio 11.13
<p>Nome: <input data-bind="value: firstName" /></p>
<p>Cognome: <input data-bind="value: lastName" /></p>
<p><strong data-bind="text: fullName"></strong></p>
La parte da notare nel codice è l'attributo
data-bind
e il suo contenuto. In questo attri-
buto, specifichiamo una coppia chiave/valore dove la chiave è il nome di un custom bin-
ding (di cui parleremo a breve) e il valore è il nome della proprietà a cui il custom binding
è legato. In questo modo, gli oggetti HTML e la proprietà observable sono collegati. I cu-
stom binding sono oggetti di KnockoutJS che stanno in ascolto sull'observable a cui sono
collegati e che reagiscono al cambiamento di valore aggiornando la UI mentre, viceversa,
aggiornano l'observable quando cambia la UI.
Ora che tutto è collegato, manca solo il collante, ovvero manca la parte di JavaScript
che collega un'istanza del ViewModel al codice HTML. Quest'ultimo pezzo di magia è
realizzato dal codice
dell'esempio 11.14
.
Esempio 11.14
ko.applyBindings(new TestViewModel());
Il metodo
applyBindings
di KnockoutJS prende in input un'istanza della classe
Te-
stViewModel
e scorre il DOM alla ricerca degli oggetti con l'attributo
data-bind
.
A ognuno di essi applica i custom binding specificati nell'attributo, collegandoli alle pro-
prietà del ViewModel. A questo punto, la nostra UI e i dati nel ViewModel sono sempre
sincronizzati grazie agli observable e ai custom binding.
