Grazie a           Sponsor
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 Present...
Model-View-ViewModel• Il MVVM fa parte della cosiddetta famiglia  dei presentation pattern MV*  – disaccoppiare i dati rap...
Model-View-ViewModel• Si definiscono e si idratano i dati (Model) da  visualizzare• Si veicolano i dati attraverso il View...
MVVM e HTML5• View: il markup HTML• Model: uno o più oggetti e array Javascript  che contengono solo dati puri e che devon...
Knockout JS e MVVM• Knockout JS si caratterizza principalmente per tre  aspetti:   – Sintassi specifica per la definizione...
Quando usare Knockout JS• Knockout JS offre una API in grado di  semplificare e strutturare lo sviluppo di  una logica di ...
Perché usare Knockout JS• Organizzazione della codebase in termini di  responsabilità degli oggetti coinvolti e delle loro...
Alternative a Knockout JS• Esistono altri Presentation Framework  Javascript che:  – Si prefiggono gli stessi obiettivi  –...
Knockout JS in 2 minuti• Definizione di un oggetto ViewModel  Javascript con proprietà observable e  metodi (command)• Def...
Demo 01DEMO
ViewModel: proprietà osservabili• Knockout JS offre la possibilità di definire le  proprietà del ViewModel come oggetti os...
Oggetti Observable• Leggerne il valore:   var fn = self.firstName( );• Scriverne il valore:   self.firstName("Roberto");• ...
Oggetti Computed Observable•   Definirne la composizione:     self.isMinor = ko.computed(function() {         return self....
Oggetti Observable Array• Definirne la composizione:  self.myArray =  ko.observableArray(["a", "b", "c"]);• Ridefiniscono ...
Demo 02DEMO
Estendere un Observable• Un oggetto Observable può essere esteso per  fornirne ulteriori funzionalità custom• Uno degli ut...
Demo 03DEMO
View: attributi di data-bind• Knockout JS offre la possibilità di definire un attributo  di data-bind nei tag del markup H...
Sintassi del data-bind• La sintassi di base è:   data-bind="value: someValue, enable:   isEnabled, …"• Si possono usare va...
Elementi Virtuali• I binding di controllo del flusso possono  essere utilizzati anche senza la presenza di  un elemento (t...
Binding Context• Il Binding Context è un oggetto che contiene i dati che sono  referenziati nei bindings della View e a cu...
Demo 04DEMO
Custom bindings• Oltre ai binding built-in nel framework è possibile  crearne di nuovi personalizzati   ko.bindingHandlers...
Demo 05DEMO
Scenari e tecniche avanzate• In Knockout JS c’è molto di più di quanto visto in  questa presentazione tra cui:   – Un moto...
Q&ATutto il materiale di questa sessione suhttp://www.communitydays.it/#CDays13
Usare Knockout JS
Upcoming SlideShare
Loading in …5
×

Usare Knockout JS

713 views

Published on

Con l'avvento su scala globale di HTML5 le tecnologie web si sono evolute cercando di offrire all'utente una migliore esperienza applicativa sempre più simile a quella desktop. Sul piano tecnico questo viene realizzato spostando la logica di presentazione sul browser client facendo leva su Javascript e CSS3. In questa sessione vedremo come KnockoutJS, un presentation framework Javascript basato sul pattern Model-View-ViewModel, permette di sviluppare Rich Internet Application (RIA) analizzando le sue caratteristiche implementative e mostrando esempi di casi reali anche in ambito mobile.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
713
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Inserite l’eventuale vostro logo in basso a destra
  • Slide da mostrare prima di iniziare la sessione – non rimuovere!
  • Ultima slide, obbligatoria
  • Usare Knockout JS

    1. 1. Grazie a Sponsor
    2. 2. Agenda• Knockout JS – Cosa, Quando, Perché – Alternative• Knockout JS: Come – Oggetti observable – Attributi data-bind
    3. 3. 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
    4. 4. 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
    5. 5. 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
    6. 6. 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
    7. 7. 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
    8. 8. 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
    9. 9. 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
    10. 10. 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
    11. 11. 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
    12. 12. Demo 01DEMO
    13. 13. 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
    14. 14. 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) { … });
    15. 15. 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
    16. 16. 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
    17. 17. Demo 02DEMO
    18. 18. 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 ViewModel ko.extenders.positiveNumberValidation = function(target, option) { … }; … self.age = ko.observable(0).extend({ positiveNumberValidation: "" });
    19. 19. Demo 03DEMO
    20. 20. 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, ch ecked, options, selectedOptions, uniqueName – Custom
    21. 21. 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)
    22. 22. 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 -->
    23. 23. 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
    24. 24. Demo 04DEMO
    25. 25. Custom bindings• Oltre ai binding built-in nel framework è possibile crearne di nuovi personalizzati ko.bindingHandlers.panelVisible = { init: function(element, valueAccessor, allBindingsAcces sor, viewModel) { … }, update: function(element, valueAccessor, allBindingsAcces sor, viewModel) { … } }; … data-bind="panelVisible: isPanelVisible"
    26. 26. Demo 05DEMO
    27. 27. 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…)
    28. 28. Q&ATutto il materiale di questa sessione suhttp://www.communitydays.it/#CDays13

    ×