HTML and CSS Reference
In-Depth Information
//HTML
<h4>People</h4>
<ul data-bind="foreach: names">
<li>
<span data-bind="text: name"> </span>
<a href="javascript:;"
data-bind="click: $root.removeName">Elimina</a>
</li>
</ul>
<button data-bind="click: addName">Add</button>
Il ViewModel è abbastanza semplice; il metodo
addName
aggiunge un nome randomico
alla lista, mentre il metodo
removeName
rimuove l'elemento selezionato dall'utente dalla
lista stessa.
Il codice HTML, al contrario, merita un approfondimento. Innanzitutto vediamo che al
custom binding
foreach
passiamo in input l'observable con i nomi. Successivamente,
tutto quello che è contenuto all'interno del tag
ul
(cioè il template) viene ripetuto per ogni
nome. Quando viene fatto il binding nel template, il contesto è l'oggetto corrente dell'array,
quindi le proprietà in binding (
name
nel nostro caso) si riferiscono a questo. Poiché il con-
testo è l'oggetto dell'array, se legassimo il custom binding
click
al nome del metodo
per cancellare un nome, otterremmo un errore. Per questo motivo usiamo la parola chiave
$root
che si riferisce al ViewModel.
nota
La proprietà
name
è in binding nonostante non sia un observable. Questo signifi-
ca che se cambiassimo il valore dell'elemento dal ViewModel, la UI non verreb-
be aggiornata. Inoltre, il metodo
removeName
passa in automatico l'elemento
a cui è legato alla funzione, quando questa viene invocata.
KnockoutJS e il pattern MVVM permettono di sviluppare applicazioni web concentrandosi
più sulla logica di business e meno sulla logica della UI. Grazie a binding e a templating,
possiamo creare funzionalità interessanti con poche righe di codice. Queste funzionalità,
comunque, non sono offerte solo da KnockoutJS, ma anche da altri framework, che spesso
