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

Norbert Eder

http://devtyr.norberteder.com

http://twitter.com/norberteder

Was bietet Knockout.js?

Deklarative Bindungen Automatisches Aktualisieren der UI Tracking der Abhängigkeiten Templating

Unterstützte Browser

Internet Explorer 6+ Firefox 2+ Chrome Safari etc.

Model-View-ViewModel

ModelLiegt am Server in der Businesslogik und wird meist per AJAX-Call bezogen.

ViewModelCode-Repräsentation der Daten und Operationen

ViewUser Interface

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

Binding Definition

<div data-bind="visible: isMessageVisible">The message goes here.

</div>

Notwendiges Attribut für die Bindung

Worauf wird gebunden?

Was aus dem ViewModel soll gebunden werden?

Built-in Bindungen für Text Folgende vordefinierten Bindungen für

die Kontrolle von Text und Darstellung stehen zur Verfügung

visible text htmlcss style attr

Built-in Bindungen für Forms

Für die Arbeit mit Formulare stehen folgende Bindungen zur Verfügung:

click event submitenable disable valuehasfocus checked optionsselectedOptionsuniqueName

Beispiel

Daten aus dem ViewModel in einer View anzeigen

Einfaches ViewModel

Definition eines ViewModels mit einigen Eigenschaften

var personViewModel = {    firstName: 'Norbert',    lastName: 'Eder',    blogUrl: 'http://devtyr.norberteder.com',    blogName: 'DevTyr'};

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>.

Bindung aktivieren

Damit data-bind ausgewertet wird (da in HTML und dadurch für Browser unbekannt), muss dieses aktiviert werden

ko.applyBindings(personViewModel);

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.

Das bisherige Beispiel kann unter

http://jsfiddle.net/GSNAj/

bezogen werden.

Beispiel

Benachrichtigungen über Änderungen; Aktualisierung des UI bei Änderung der Daten im ViewModel

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')

Observables

Bindung einer Schaltfläche an das ViewModel zur Aktualisierung der Daten

Erweiterung ViewModel

<button data-bind="click: changeItem">Change</button>

changeItem: function() {    this.firstName('Norbert Updated');}

Observables

Änderungen am ViewModel werden umgehend im UI wirksam, ohne zusätzlichem Code

Observables lesen/schreiben

personViewModel.firstName() liefert den gesetzten Wert zurück

personViewModel.firstName('Updated') setzt den Wert auf „Updated“.

personViewModel.firstName('Updated').lastName('Updated') aktualisiert firstName UND lastName.

Benachrichtigungen abonnieren

Sollte es notwendig sein, können Änderungsbenachrichtigungen manuell bezogen werden:

personViewModel.firstName.subscribe(function(newValue) { alert("Updated first name: " + newValue);});

Das bisherige Beispiel ist unter

http://jsfiddle.net/eLmaN/

zu finden.

Ressourcen

Home: http://knockoutjs.com/ Beispiele:

http://knockoutjs.com/examples/ Dokumentation: http://

knockoutjs.com/documentation/introduction.html

Source: https://github.com/SteveSanderson/knockout

Wiki: https://github.com/SteveSanderson/knockout/wiki