knockout.js – was ist es, was kann es?

Nicht zuletzt durch ein Tutorial bei tutsplus.com bin ich auf knockout.js aufmerksam geworden. Da inzwischen ein regelrechter Hype um das relative kleine jQuery Plugin (29kb) entstanden ist, stellt sich natürlich die Frage: brauche ich das? Und was macht es überhaupt? Und zugegebenermaßen muss ich sagen, das mir knockout.js als durchaus sinnvolle Erweiterung meines Werkzeugkastens erscheint!

Screenshot vom knockout.js Tutorial

Was es macht? Es vereinfacht die Erstellung von dynamischen User Interfaces. Und während jetzt die ersten gähnend abwinken möchte ich an dieser Stelle zu bedenken geben, was man so alles dem Cient zumutet, wenn man zum Beispiel die jQuery UI verwendet. Bei dem Skript kann man (rechnet man CSS, Grafiken und die ganze Theme-Vererbung hinzu) weder von klein, noch von leichtgewichtig sprechen, um genau zu sein, es ist ein ziemlicher Batzen der da auf den Browser zukommt. Da kann man doch mit 29kb gut (und vor allem besser) leben!

Im Groben setzt knockout.js das MVC-Modell um (Model / View / Controller) und trennt somit die Logik vom Design. Daten werden repräsentiert durch ein Model, im Beispiel von tutsplus.com stecken diese in der behavior.js und sind statisch. Man kann ein solches Model natürlich auch jederzeit mit PHP erzeugen. Ein solcher Datensatz besteht aus der Regel aus 1:n Elementen. Darüber hinaus gibt es einen View, der EINEN dieser Datensätze visualisiert. Man könnte den View übrigens auch Template nennen ;)

Im View kann man einen Delete-Button berücksichtigen. Ferner kann man ein Formular entwerfen das einen neuen Datensatz generiert. Nun kommt Knockout.js ins Spiel! Es nimmt sich die erzeugten Daten (Model), zeigt diese 1:n mittels Template (View) an, und packt darunter das Formular für einen neuen Datensatz. Darüber hinaus versorgt es den Delete-Button, und das Formular für einen neuen Datensatz mit der entsprechenden Funktionalität.

Twitter Client mit knockout.js

Was bedeutet in diesem Zusammenhang „entsprechend Funktionalität“? Der Trick ist, dass nun die Daten dynamisch sind. Drücke ich den Delete-Button wird der Div-Layer der die entsprechenden Daten enthält aus der Liste gelöscht, und die Daten auch aus dem Model entfernt. Füge ich einen neuen Datensatz hinzu, wird ein neuer Div-Layer an das Ende der Liste angefügt und das Model entsprechend erweitert. Alles fein dynamisch mit JavaScript, ohne eine Zeile PHP!

Das ist jetzt die Tutorial-Version, in Wahrheit hat man natürlich keine behavior.js sondern wie schon oben angesprochen einen JSON-Service in PHP. Dieser liefert initial die Daten, und wird auch über Änderungen informiert. Die Dokumentation hierzu findet ihr hier.

Das gezeigte Beispiel ist eine feine Möglichkeit knockout.js einzusetzen, wenngleich auch die einfachste Art es zu verwenden. Das kleine Skript kann nämlich noch viel mehr! Zum Beispiel einen kompletten Twitter-Client umsetzen, oder Abhängigkeiten (also 1:n Datensätze, die wiederum 1:n Datensätze enthalten).

knockout.js ist wirklich eine coole Art User Interfaces zu implementieren und die Einsatzmöglichkeiten sind vielfältig. Besonders interessant ist dabei auch das Templating, da es wirklich nicht einfach sein kann, JSON-Daten zu visualisieren. Bei der Verwendung von knockout.js hat sich unobtrusives JavaScript natürlich erledigt, aber in Zeiten von Magento interessiert das scheinbar eh keinen mehr.

Ähnliche Beiträge

jQuery Logger – Loggen / Debuggen in jQuery Loggen / Debuggen von JavaScript ist so eine Sache. Alert fällt komplett hinten raus, console.log geht nicht im Internet Explorer, und alles in allem ...
Redactor – Wysiwyg mit jQuery Ich habe ja erst vor einigen Wochen über einen neuen Wysiwyg-Editor berichtet, der bei einigen größeren Portalen zum Einsatz kommt. In den daraus resu...
Starke Passwörter mit jQuery Ich hatte ja erst unlängst auf ein Tutorial zum Thema Passwortstärke hingewiesen, das Thema wird immer wichtiger da der Benutzer es von sich aus nicht...
HTML5 Validierung mit jQuery HTML5 besitzt eine eingebaute Validierung für Formular-Elemente, das dumme ist nur, diese funktioniert derzeit nur auf Webkit-Browsern und nicht auf F...

3 Antworten auf „knockout.js – was ist es, was kann es?“

  1. Hallo!

    Nicht der MVC Pattern sondern der MVVM Pattern wird durch knockout.js implementiert. Das ist ein ziemlich großer Unterschied

    Und bitte zum Teufel mit dem be*****en PHP Kram.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.