Post on 18-Nov-2014
description
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