Download - Usare Knockout JS
![Page 1: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/1.jpg)
WEB02 – Usare Knockout.js
#CDays13 – 27 e 28 febbraio 2013
Roberto Messora
Software Engineer, GIS Specialist
Mail: [email protected]: @robymeshttp://www.ugidotnet.org/robymes
![Page 2: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/2.jpg)
Grazie aSponsor
![Page 3: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/3.jpg)
Agenda• Knockout JS– Cosa, Quando, Perché– Alternative
• Knockout JS: Come– Oggetti observable– Attributi data-bind
![Page 4: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/4.jpg)
Che cos’è Knockout JS• Presentation Framework Javascript– Implementazione di un particolare Design
Pattern di Presentation (UI): il Model-View-ViewModel (MVVM)
– Implementato completamente in Javascript– Multi-Browser (che supporti HTML5)– Convive senza problemi con i maggiori
Framework Javascript (jQuery, jQuery Mobile, …)– Portale del progetto http://knockoutjs.com
![Page 5: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/5.jpg)
Model-View-ViewModel• Il MVVM fa parte della cosiddetta
famiglia dei presentation pattern MV*– disaccoppiare i dati rappresentati
nella UI (Model) dalla UI stessa (View) promuovendo una netta separazione fra questi mediante l’uso di un oggetto terzo: il ViewModel
![Page 6: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/6.jpg)
Model-View-ViewModel• Si definiscono e si idratano i dati (Model) da
visualizzare• Si veicolano i dati attraverso il ViewModel verso
la View utilizzando un meccanismo di data-bind che permetta la gestione bidirezionele degli aggiornamenti dei dati stessi
• Si definiscono delle operazioni nel ViewModel per gestire gli eventi provenienti dalla View
![Page 7: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/7.jpg)
MVVM e HTML5• View: il markup HTML • Model: uno o più oggetti e array Javascript
che contengono solo dati puri e che devono essere rappresentati nella View
• ViewModel: un oggetto Javascript che identifica una rappresentazione sotto forma di codice dei dati (Model) e delle operazioni della View
![Page 8: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/8.jpg)
Knockout JS e MVVM• Knockout JS si caratterizza principalmente per
tre aspetti:– Sintassi specifica per la definizione di un binding
dichiarativo dei dati nel markup HTML5– API Javascript per la definizione delle proprietà
dell’oggetto ViewModel che fornisce un meccanismo automatico di notifica del loro aggiornamento
– Sintassi di templating di frammenti di markup HTML per il rendering di liste/array
![Page 9: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/9.jpg)
Quando usare Knockout JS• Knockout JS offre una API in grado di
semplificare e strutturare lo sviluppo di una logica di UI mediamente complessa
• L’uso di Knockout JS è indicato quando si affronta lo sviluppo di una Rich Internet Application (RIA) lato client
![Page 10: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/10.jpg)
Perché usare Knockout JS• Organizzazione della codebase in termini di
responsabilità degli oggetti coinvolti e delle loro interazioni in modo da evitare il più possibile la produzione del cosiddetto codice spaghetti
• Gestione strutturata degli elementi e degli eventi del DOM
• Possibilità di sviluppare il codice utilizzando facilmente tecniche di Unit Testing
![Page 11: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/11.jpg)
Alternative a Knockout JS• Esistono altri Presentation Framework
Javascript che:– Si prefiggono gli stessi obiettivi – Fanno parte della famiglia MV*
• Per citare i più conosciuti:– BackBone JS– Ember JS– Angular JS
![Page 12: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/12.jpg)
Knockout JS in 2 minuti• Definizione di un oggetto ViewModel
Javascript con proprietà observable e metodi (command)
• Definizione del markup HTML5 con attributi data-bind
• Applicazione del ViewModel alla View mediante il metodo ko.applyBindings
![Page 13: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/13.jpg)
DEMODemo 01
![Page 14: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/14.jpg)
ViewModel: proprietà osservabili
• Knockout JS offre la possibilità di definire le proprietà del ViewModel come oggetti osservabili di tre tipi:– Observable– Computed Observable– Observable Array
• Hanno la capacità di notificare automaticamente l’aggiornamento del proprio valore alla View e viceversa
![Page 15: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/15.jpg)
Oggetti Observable• Leggerne il valore:
var fn = self.firstName( );
• Scriverne il valore:self.firstName("Roberto");
• Chain syntax:self.firstName("Roberto").lastName("Messora");
• Sottoscrizione esplicita:self.firstName.subscribe(function(newValue) {
…});
![Page 16: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/16.jpg)
Oggetti Computed Observable
• Definirne la composizione: self.isMinor = ko.computed(function() {
return self.age() < 18;});
• Possono essere concatenati:self.canDrive = ko.computed(function() {
return self.isMinor() == false;});
• Possono essere anche in scrittura per scenari come:– Decomposizione dell’input utente– Convertitore di valore/formato– Validatore di input utente
• Offrono tutta una serie di metodi e opzioni per un uso avanzato
![Page 17: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/17.jpg)
Oggetti Observable Array• Definirne la composizione:
self.myArray = ko.observableArray(["a", "b", "c"]);
• Ridefiniscono tutti i classici metodi di un normale array:– indexOf, slice– pop, push, shift, unshift, reverse, sort, splice– remove, removeAll, destroy, destroyAll
![Page 18: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/18.jpg)
DEMODemo 02
![Page 19: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/19.jpg)
Estendere un Observable• Un oggetto Observable può essere esteso per fornirne
ulteriori funzionalità custom• Uno degli utilizzi più utili è quello della validazione
delle proprietà del ViewModelko.extenders.positiveNumberValidation =function(target, option) { … };
…self.age = ko.observable(0).extend({ positiveNumberValidation: "" });
![Page 20: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/20.jpg)
DEMODemo 03
![Page 21: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/21.jpg)
View: attributi di data-bind• Knockout JS offre la possibilità di definire un attributo
di data-bind nei tag del markup HTML5• Sono disponibili 4 tipi di famiglie di binding:
– Controllo del testo e del rendering: visible, text, html, css, style, attr
– Controllo del flusso: foreach, if, ifnot, with– Specifici per i controlli delle form: click, event, submit,
enable, disable, value, hasfocus, checked, options, selectedOptions, uniqueName
– Custom
![Page 22: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/22.jpg)
Sintassi del data-bind• La sintassi di base è:
data-bind="value: someValue, enable: isEnabled, …"
• Si possono usare vari tipi di valori:– Proprietà del ViewModel– Espressione condizionale– Chiamata a funzione del ViewModel– Function expression (funzione inline)– Object literal (solo con il bindings with)
![Page 23: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/23.jpg)
Elementi Virtuali • I binding di controllo del flusso
possono essere utilizzati anche senza la presenza di un elemento (tag) contenitore:<!– ko foreach: items -->
<span data-bind="text: name"></span><!-- /ko -->
![Page 24: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/24.jpg)
Binding Context• Il Binding Context è un oggetto che contiene i dati che
sono referenziati nei bindings della View e a cui si può accedere all’interno degli stessi
• Le proprietà più importanti sono:– $parent: il ViewModel genitore (se esiste)– $root: il ViewModel radice– $data: il ViewModel corrente– $index: l’indice dell’elemento corrente in un binding foreach– $element: l’elemento (tag) del markup HTML5 in cui è
definito l’attributo data-bind corrente
![Page 25: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/25.jpg)
DEMODemo 04
![Page 26: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/26.jpg)
Custom bindings• Oltre ai binding built-in nel framework è possibile
crearne di nuovi personalizzatiko.bindingHandlers.panelVisible = { init: function(element, valueAccessor, allBindingsAccessor, viewModel) { … }, update: function(element, valueAccessor, allBindingsAccessor, viewModel) { … }};…data-bind="panelVisible: isPanelVisible"
![Page 27: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/27.jpg)
DEMODemo 05
![Page 28: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/28.jpg)
Scenari e tecniche avanzate• In Knockout JS c’è molto di più di quanto visto in
questa presentazione tra cui:– Un motore di templating del markup HTML5– Tecniche specifiche di implementazione di librerie
riutilizzabili di custom bindings – Funzioni helper per la gestione degli eventi scatenati
dagli elementi del markup HTML5– L’uso del plugin di mapping– Moltissime funzioni di utility (non documentate…)
![Page 29: Usare Knockout JS](https://reader036.vdocuments.net/reader036/viewer/2022081716/5482160bb4af9f0b518b46f2/html5/thumbnails/29.jpg)
Q&ATutto il materiale di questa sessione suhttp://www.communitydays.it/
#CDays13