Das Dokument beschreibt das Model-View-ViewModel (MVVM) Muster für HTML und JavaScript unter Verwendung von Knockout.js, das deklarative Bindungen und automatisches Aktualisieren der Benutzeroberfläche ermöglicht. Es werden grundlegende Konzepte wie Binding und Observables erklärt, die die Interaktivität zwischen dem ViewModel und der UI erleichtern. Zudem werden Beispiele und Links zu Ressourcen bereitgestellt, um Entwicklern den Einstieg in die Nutzung von Knockout.js zu erleichtern.

1. Model-View-ViewModel (MVVM)
für HTML und JavaScript
Norbert Eder
http://devtyr.norberteder.com
http://twitter.com/norberteder

2. Was bietet Knockout.js?
 Deklarative Bindungen
 Automatisches Aktualisieren der UI
 Tracking der Abhängigkeiten
 Templating

3. Unterstützte Browser
 Internet Explorer 6+
 Firefox 2+
 Chrome
 Safari
 etc.

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. 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. Binding Definition
Notwendiges 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. 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. Built-in Bindungen für
Forms
 Für die Arbeit mit Formulare stehen
folgende Bindungen zur Verfügung:
click event submit
enable disable value
hasfocus checked options
selectedOptions
uniqueName

9. Beispiel
 Daten aus dem ViewModel in einer View
anzeigen

10. Einfaches ViewModel
 Definition eines ViewModels mit einigen
Eigenschaften
var personViewModel = {
firstName: 'Norbert',
lastName: 'Eder',
blogUrl: 'http://devtyr.norberteder.com',
blogName: 'DevTyr'
};

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. Bindung aktivieren
 Damit data-bind ausgewertet wird (da
in HTML und dadurch für Browser
unbekannt), muss dieses aktiviert
werden
ko.applyBindings(personViewModel);

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. Das bisherige Beispiel kann unter
http://jsfiddle.net/GSNAj/
bezogen werden.

15. Beispiel
 Benachrichtigungen über Änderungen;
Aktualisierung des UI bei Änderung der
Daten im ViewModel

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. 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. Observables
 Änderungen am ViewModel werden
umgehend im UI wirksam, ohne
zusätzlichem Code

19. Observables
lesen/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. Benachrichtigungen abonnieren
 Sollte es notwendig sein, können
Änderungsbenachrichtigungen manuell
bezogen werden:
personViewModel.firstName.subscribe(function(newValue) {
alert("Updated first name: " + newValue);
});

21. Das bisherige Beispiel ist unter
http://jsfiddle.net/eLmaN/
zu finden.

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