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

TransformJS – einfache Transforms mit JavaSc... CSS Transforms sind eigentlich fester Bestandteil jedes Browser - dummerweise in jedem Browser ein klein wenig anders, und dummerweise auch mit andere...
jwerty – JavaScript Keyboard Events vom Fein... Keyboard Events in Javascript sind in Backends das vielleicht am meisten unterschätze Feature! Wenn man mal ehrlich ist: man benutzt die Tastatur kaum...
Passwortstärke mit Javascript Anzeigen Es gibt doofe Passwörter, wie zum Beispiel das Wort passwort, und es gibt relativ gute Passwörter, wie zum Beispiel p4$$w0r7, und es gibt noch bessere...
Lint für jQuery Früher war alles besser, der Himmel war blauer, die Wiesen grüner und ich programmierte eine Mailbox-Software in Turbo Pascal und wurde in der Uni daz...

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.