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

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