Knockout js

“Simplify dynamic Javascript UIs by applying the Model View ViewModel Pattern”

Premessa

Negli ultimi anni le applicazioni web

sono diventate sempre più complesse

Con l’introduzione di AJAX le abbiamo

fatte andare sempre più veloci

Knockout.js

Abbiamo cominciato a far lavorare

di più il browser spostando la

logica dal server al client

E ci siamo trovati con vecchi

problemi che pensavamo di

aver risolto …

Knockout.js Knockout è un’API JavaScript che facilita la costruzione di interfacce utente introducendo il pattern MVVM lato client

Model View ViewModel

MVC vs MVVM Ci è stato detto più volte che il modo migliore per sviluppare una applicazione web è quello di seguire il pattern MVC

MVC vs MVVM MVVM si differenzia da MVC perché introduce il concetto di ViewModel, un oggetto che gestisce le interazioni tra il Model e gli elementi della View

MVC vs MVVM MVVM non è alternativo a MVC, lo completa, in quanto permette di demandare al client le operazioni che interessano soltanto la modifica degli elementi della View

Knockout.js In questo senso Knockout ci permette di implementare facilmente MVVM riducendo al minimo il codice da scrivere

Knockout.js Caratteristiche principali

Declarative binding Associazione tra le proprietà del ViewModel e gli elementi di una View attraverso una sintassi dichiarativa all’interno dell’attributo data-bind

Definiamo il ViewModel 1 Realizziamo ad esempio un viewModel che permetta di visualizzare le caratteristiche di una playlist

E’ un semplice oggetto JavaScript con proprietà e metodi

Associamo le proprietà del ViewModel agli elementi della View

2

Proprietà del ViewModel

Attributo dell’elemento della View

Ordiniamo a knockout di applicare le associazioni

3

Deve essere fatto dopo il caricamento del DOM

Automatic UI refresh Grazie alla definizione di oggetti “observable” knockout mantiene sincronizzata l’interfaccia utente con i valori del ViewModel

ko.observable( ) 4

Se modifico il valore tramite il campo input il titolo rifletterà la modifica

Dependency tracking Ogni volta che un elemento della View o un’altra proprietà del ViewModel fanno riferimento ad un observable knockout registra una dipendenza che risolve automaticamente secondo lo schema publish-subscribe

ko.computed( ) 5

Campo calcolato che dipende dal valore di altre proprietà, ci pensa knockout a gestirne l’aggiornamento al modificare di una delle sue dipendenze

Templating Se il normale html non basta ed il codice diventa ripetitivo possiamo ricorrere ai template

template: { name: … 6

Nome del template

Knockout + MVC In qualche modo le informazioni devono passare da e per il server. In ASP.NET MVC3 lo facciamo con JSON, AJAX e il Model Binder

Slide 1: http://www.flickr.com/photos/jnyemb/5200175187/in/photostream/

Slide 2: http://www.flickr.com/photos/theilr/345056969/in/photostream/

Slide 3: http://www.flickr.com/photos/damianmorysfotos/4388501292/in/photostream/

Slide 5: http://www.flickr.com/photos/su-lin/131551438/in/photostream/

Credits

Le immagini contenute in questa presentazione hanno licenza Creative Commons

Thank You

MANUEL SCAPOLAN website: www.manuelscapolan.it twitter: manuelscapolan e-mail: info@manuelscapolan.it