Model View ViewModel mit Knockout.js
HTML definiert die Struktur, JavaScript das Verhalten einer Webanwendung. Doch wie verbindet man beide Welten auf elegante Art? Die JavaScript-Bibliothek Knockout.js schlägt mit dem MVVM-Entwurfsmuster eine Brücke.
- Golo Roden
HTML und JavaScript sind die Grundbausteine des modernen Webs: HTML definiert die Struktur, JavaScript das Verhalten einer Webanwendung. Doch wie verbindet man beide Welten auf elegante Art? Die JavaScript-Bibliothek Knockout.js schlägt mit dem MVVM-Entwurfsmuster eine Brücke.
Die JavaScript-Bibliothek Knockout in einem Satz zu beschreiben fällt verhältnismäßig leicht: Ihre einzige Aufgabe besteht darin, das Entwurfsmuster Model View ViewModel (MVVM) für HTML zu implementieren und auf diesem Weg das Konzept der Datenbindung zwischen HTML und JavaScript zu ermöglichen.
MVVM geht auf eine Veröffentlichung von John Gossmann im Jahr 2005 zurück und zielte zunächst auf die beiden Microsoft-Techniken Windows Presentation Foundation (WPF) und Silverlight ab, lässt sich aber prinzipiell für jede beliebige deklarative UI-Technik adaptieren.
Die Idee hinter MVVM ist, zwischen Ansicht und Domänenmodell eine weitere Schicht einzufügen, die eine lose Kopplung der Ansicht ermöglicht. Da diese Schicht in ihrem Aufbau der konkreten Ansicht entspricht, bezeichnet man sie als ViewModel. Es enthält für jedes UI-Element passende Daten, die über Datenbindung an die jeweilige Ansicht gekoppelt werden. Verwendet man hierfür eine bidirektionale Datenbindung, wirken sich Eingaben des Anwenders direkt auf das ViewModel und programmatische Änderungen am ViewModel direkt auf die Ansicht aus. Zugleich lösen Schaltflächen entsprechende Funktionen am ViewModel aus (s. Abb. 1).
Ein wesentlicher Vorteil dieses Vorgehens besteht darin, sämtliche UI-Logik aus der Ansicht in das zugehörige ViewModel zu verlagern, das man auf einfachem Weg automatisiert testen kann. Umfangreiche, fehleranfällige und vor allem aufwendige, von Hand durchzuführende UI-Tests können daher entfallen.
Implementieren der Konzepte
Um Knockout zu verwenden, muss man zunächst die passende Skriptdatei von der Website der Bibliothek herunterladen und in eine HTML-Datei einbinden:
<!doctype html>
<html>
<head>
<title>Knockout-Demo</title>
</head>
<body>
<script type="text/javascript" src="knockout-2.2.1.js">
</script>
</body>
</html>
Knockout stellt seine Funktionen anschließend über das globale JavaScript-Objekt ko zur Verfügung. Um es in Aktion zu erleben, muss man der eben erstellten Webseite zunächst einige Steuerelemente hinzufügen, wie ein Eingabefeld und eine Schaltfläche:
<body>
<input type="text" />
<button>Senden</button>
<script type="text/javascript" src="knockout-2.2.1.js">
Um die Datenbindung für diese beiden Steuerelemente aktivieren zu können, benötigt man im nächsten Schritt ein ViewModel. Es muss eine Zeichenkette und eine Funktion enthalten, die man an den Wert des Eingabefelds beziehungsweise das Click-Ereignis der Schaltfläche binden kann.
