Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Knockout.js

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

  • Be the first to comment

  • Be the first to like this

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

×