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!
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.
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.
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.
Ups – mein Fehler, nicht richtig aufgepasst! ;)
knockout ist kein jQuery-Plugin, kann mit jedem Framework genutzt werden. Arbeitet aber auf jeden Fall gut mit jQuery zusammen.