WEB02 – Usare Knockout.js

#CDays13 – 27 e 28 febbraio 2013

Roberto Messora

Software Engineer, GIS Specialist

Mail: robymes@outlook.comTwitter: @robymeshttp://www.ugidotnet.org/robymes

Grazie aSponsor

Agenda• Knockout JS– Cosa, Quando, Perché– Alternative

• Knockout JS: Come– Oggetti observable– Attributi data-bind

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

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

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

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

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

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

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

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

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

DEMODemo 01

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

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) {

…});

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

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

DEMODemo 02

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: "" });

DEMODemo 03

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

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)

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 -->

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

DEMODemo 04

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"

DEMODemo 05

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…)

Q&ATutto il materiale di questa sessione suhttp://www.communitydays.it/

#CDays13