Sie sind hier

knockout.js

Eintrag zuletzt aktualisiert am: 10.02.2014

Die freie Bibliothek knockout.js erleichtert den Einsatz des aus Technologien wie WPF und Silverlight bekannten Musters Model-View-ViewModel (MVVM). Dem Namen zur Folge wird hierbei die Anwendung (unter anderem) in drei Teile gegliedert: Das Model repräsentiert heutzutage die Fachobjekte der Anwendung. Ursprünglich fanden sich im Model auch die dazugehörigen Logiken wieder. Heutzutage werden diese in der Regel in eigene Klassen ausgelagert. Die View entspricht der GUI – im Fall von Webanwendungen handelt es sich dabei um HTML-basierte Dialogfelder.

Um eine Vermischung von GUI und Präsentationslogik zu vermeiden, wird die Präsentationslogik in die View-Models ausgelagert. Als Präsentationslogik wird hierbei zum Beispiel das Anstoßen von serverseitigen Routinen unter Verwendung der erfassten Daten sowie das Aktualisieren der GUI verstanden. View-Models haben jedoch auch die Aufgabe, Modelle für die Anzeige in bestimmten Views anzupassen. Beispielsweise könnten sie sich um die Bildung von Zwischensummen oder um das Verdichten von Modellen für eine kompaktere Darstellung kümmern.

Beim Einsatz von MVVM ist eine lose Kopplung zwischen View und View-Model wünschenswert, d. h. beide sollen einander möglichst wenig kennen, damit sie der Entwickler separat voneinander entwickeln und testen kann bzw. um sie wiederverwendbar und austauschbar zu gestalten. Aus diesem Grund wird MVVM in Kombination mit Datenbindung eingesetzt, sodass deklarativ festgelegt werden kann, welche Elemente des View-Models in welchen Teilen der GUI anzuzeigen sind. Dies bedingt jedoch in vielen Fällen auch, dass die View über Änderungen im View-Model informiert werden muss, da Werte, welche im View-Model geändert werden, auch in der View zu aktualisieren sind.

Genau in diese Kerbe schlägt knockout.js, indem es sowohl Möglichkeiten zur deklarativen Datenbindung als auch Möglichkeiten zur Implementierung von Benachrichtigungsszenarien für HTML- und Java-Script-basierte GUIs bietet.