Downloaded 15 times
![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](https://image.slidesharecdn.com/web02-usareknockoutjs-slide-130227165809-phpapp02/85/Usare-Knockout-JS-17-320.jpg)
Uploaded byRoberto Messora
Usare Knockout JS
Il documento fornisce una panoramica su Knockout.js, un framework JavaScript per lo sviluppo di interfacce utente basato sul pattern Model-View-ViewModel (MVVM). Descrive le funzionalità chiave di Knockout.js, come la gestione dei dati osservabili e il binding dei dati in HTML5, e confronta alcune alternative disponibili nel panorama dei framework JavaScript. Viene enfatizzato come Knockout.js possa semplificare lo sviluppo di applicazioni web ricche e strutturate.
Usare Knockout JS
- 2. Grazie a Sponsor
- 3. Agenda • Knockout JS – Cosa, Quando, Perché – Alternative • Knockout JS: Come – Oggetti observable – Attributi data-bind
- 4. Che cos’è KnockoutJS • 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
- 5. Model-View-ViewModel • Il MVVMfa 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
- 6. Model-View-ViewModel • Si definisconoe 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
- 7. 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
- 8. Knockout JS eMVVM • 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
- 9. Quando usare KnockoutJS • 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
- 10. Perché usare KnockoutJS • 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
- 11. Alternative a KnockoutJS • 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
- 12. Knockout JS in2 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
- 13.
- 14. 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
- 15. Oggetti Observable • Leggerneil 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) { … });
- 16. 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
- 17. 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
- 18.
- 19. 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: "" });
- 20.
- 21. View: attributi didata-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
- 22. 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)
- 23. Elementi Virtuali • Ibinding 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 -->
- 24. Binding Context • IlBinding 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
- 25.
- 26. Custom bindings • Oltreai 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"
- 27.
- 28. Scenari e tecnicheavanzate • 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…)
- 29. Q&A Tutto il materialedi questa sessione su http://www.communitydays.it/ #CDays13