Knockout.js

6,232 views

Published on

Applicazione del pattern MVVM lato client con Knockout.js

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

  • Be the first to like this

No Downloads
Views
Total views
6,232
On SlideShare
0
From Embeds
0
Number of Embeds
3,733
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Knockout.js

  1. 1. Knockout js“Simplify dynamic Javascript UIs by applying the Model View ViewModel Pattern”
  2. 2. Premessa Negli ultimi anni le applicazioni web sono diventate sempre più complesse
  3. 3. Con l’introduzione di AJAX le abbiamofatte andare sempre più veloci
  4. 4. Abbiamo cominciato a far lavorareKnockout.js di più il browser spostando la logica dal server al client
  5. 5. E ci siamo trovati con vecchiproblemi che pensavamo diaver risolto …
  6. 6. Knockout.jsKnockout è un’API JavaScriptche facilita la costruzione diinterfacce utente introducendoil pattern MVVM lato client Model View ViewModel
  7. 7. MVC vs MVVMCi è stato detto più volte che ilmodo migliore per sviluppareuna applicazione web è quellodi seguire il pattern MVC
  8. 8. MVC vs MVVMMVVM si differenzia da MVCperché introduce il concetto diViewModel, un oggetto chegestisce le interazioni tra ilModel e gli elementi della View
  9. 9. MVC vs MVVMMVVM non è alternativo a MVC, locompleta, in quanto permette didemandare al client le operazioniche interessano soltanto lamodifica degli elementi della View
  10. 10. Knockout.jsIn questo senso Knockout cipermette di implementarefacilmente MVVM riducendo alminimo il codice da scrivere
  11. 11. Knockout.jsCaratteristiche principali
  12. 12. Declarative bindingAssociazione tra le proprietà delViewModel e gli elementi di una Viewattraverso una sintassi dichiarativaall’interno dell’attributo data-bind
  13. 13. 1 Definiamo il ViewModel Realizziamo ad esempio un viewModel che permetta di visualizzare le caratteristiche di una playlist E’ un semplice oggetto JavaScript con proprietà e metodi
  14. 14. 2 Associamo le proprietà del ViewModel agli elementi della View Attributo dell’elemento della View Proprietà del ViewModel
  15. 15. 3 Ordiniamo a knockout di applicare le associazioni Deve essere fatto dopo il caricamento del DOM
  16. 16. Automatic UI refreshGrazie alla definizione di oggetti“observable” knockout mantienesincronizzata l’interfaccia utentecon i valori del ViewModel
  17. 17. 4 ko.observable( ) Se modifico il valore tramite il campo input il titolo rifletterà la modifica
  18. 18. Dependency trackingOgni volta che un elemento dellaView o un’altra proprietà delViewModel fanno riferimento adun observable knockout registrauna dipendenza che risolveautomaticamente secondo loschema publish-subscribe
  19. 19. 5 ko.computed( ) Campo calcolato che dipende dal valore di altre proprietà, ci pensa knockout a gestirne l’aggiornamento al modificare di una delle sue dipendenze
  20. 20. TemplatingSe il normale html non basta ed ilcodice diventa ripetitivo possiamoricorrere ai template
  21. 21. 6 template: { name: … Nome del template
  22. 22. Knockout + MVCIn qualche modo le informazionidevono passare da e per il server.In ASP.NET MVC3 lo facciamo conJSON, AJAX e il Model Binder
  23. 23. CreditsLe immagini contenute in questa presentazione hannolicenza Creative CommonsSlide 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/
  24. 24. Thank You MANUEL SCAPOLAN website: www.manuelscapolan.it twitter: manuelscapolan e-mail: info@manuelscapolan.it

×