Knockout.js

2,063 views

Published on

Model-View-ViewModel (MVVM) für HTML und JavaScript

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
2,063
On SlideShare
0
From Embeds
0
Number of Embeds
508
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Knockout.js

  1. 1. Model-View-ViewModel (MVVM) für HTML und JavaScript Norbert Eder http://devtyr.norberteder.com http://twitter.com/norberteder
  2. 2. Was bietet Knockout.js? Deklarative Bindungen Automatisches Aktualisieren der UI Tracking der Abhängigkeiten Templating
  3. 3. Unterstützte Browser Internet Explorer 6+ Firefox 2+ Chrome Safari etc.
  4. 4. Model-View-ViewModel Model Liegt am Server in der Businesslogik und wird meist per AJAX-Call bezogen. ViewModel Code-Repräsentation der Daten und Operationen View User Interface
  5. 5. Vorteile Kein Code zum Setzen von Werten in der UI bzw. zum Lesen daraus notwendig Aufgeräumter und einfach zu wartender Code Sehr einfach zu erlernen Unterstützung der gängigen Browser Einfache Integration in bestehende Websites
  6. 6. Binding DefinitionNotwendiges Attribut für Worauf wird gebunden? die Bindung<div data-bind="visible: isMessageVisible"> The message goes here.</div> Was aus dem ViewModel soll gebunden werden?
  7. 7. Built-in Bindungen für Text Folgende vordefinierten Bindungen für die Kontrolle von Text und Darstellung stehen zur Verfügung visible text html css style attr
  8. 8. Built-in Bindungen fürForms Für die Arbeit mit Formulare stehen folgende Bindungen zur Verfügung: click event submit enable disable value hasfocus checked options selectedOptions uniqueName
  9. 9. Beispiel Daten aus dem ViewModel in einer View anzeigen
  10. 10. Einfaches ViewModel Definition eines ViewModels mit einigen Eigenschaften var personViewModel = { firstName: Norbert, lastName: Eder, blogUrl: http://devtyr.norberteder.com, blogName: DevTyr };
  11. 11. Einfache View In der View ist nun die Bindung mit dem Attribut data-bind zu setzen My first name is <span data-bind="text: firstName"></span>. My last name is <span data-bind="text: lastName"></span>. Find my weblog @ <a data-bind="attr: { href: blogUrl, title: blogName }">here</a>.
  12. 12. Bindung aktivieren Damit data-bind ausgewertet wird (da in HTML und dadurch für Browser unbekannt), muss dieses aktiviert werden ko.applyBindings(personViewModel);
  13. 13. applyBindings Hintergrund Erster Parameter definiert das Objekt, das gebunden wird. Ein optionaler zweiter Parameter definiert den Bereich, der nach dem Attribut data-bind durchsucht wird. Wenn nicht gesetzt, bezieht sich die Bindung auf das gesamte Dokument.
  14. 14. Das bisherige Beispiel kann unter http://jsfiddle.net/GSNAj/ bezogen werden.
  15. 15. Beispiel Benachrichtigungen über Änderungen; Aktualisierung des UI bei Änderung der Daten im ViewModel
  16. 16. Observables Werden die Eigenschaften als Oberservables definiert, senden diese Änderungsbenachrichtigungen an die Abonnenten. Das UI muss nicht verändert werden und bleibt funktionsfähig firstName: ko.observable(Norbert)
  17. 17. Observables Bindung einer Schaltfläche an das ViewModel zur Aktualisierung der Daten <button data-bind="click: changeItem">Change</button> Erweiterung ViewModel changeItem: function() { this.firstName(Norbert Updated); }
  18. 18. Observables Änderungen am ViewModel werden umgehend im UI wirksam, ohne zusätzlichem Code
  19. 19. Observableslesen/schreiben personViewModel.firstName() liefert den gesetzten Wert zurück personViewModel.firstName(Upd ated) setzt den Wert auf „Updated“. personViewModel.firstName(Upd ated).lastName(Updated) aktualisiert firstName UND lastName.
  20. 20. Benachrichtigungen abonnieren  Sollte es notwendig sein, können Änderungsbenachrichtigungen manuell bezogen werden:personViewModel.firstName.subscribe(function(newValue) { alert("Updated first name: " + newValue);});
  21. 21. Das bisherige Beispiel ist unter http://jsfiddle.net/eLmaN/ zu finden.
  22. 22. Ressourcen Home: http://knockoutjs.com/ Beispiele: http://knockoutjs.com/examples/ Dokumentation: http://knockoutjs.com/documentation/introd uction.html Source: https://github.com/SteveSanderson/knocko ut Wiki: https://github.com/SteveSanderson/knocko ut/wiki

×