201423Aug

Way.js: Mini-Framework für Zwei-Wege-Data-Bindings

Sie zählen zu den Grundkonzepten von AngularJS und Knockout.js: Zwei-Wege-Data-Bindings, also die Verknüpfung von JavaScript-Daten mit DOM-Elementen, ermöglichen automatische UI-Aktualisierungen und Serialisierungen von Formulardaten. Gerade bei Formularen, die per Ajax übermittelt werden sollen, ist die Kapselung von Daten in JavaScript-Objekten unumgänglich. Mit jQuerys $.serialize() ist zwar das Serialisieren der Formulardaten relativ einfach, aber damit ist noch nicht das Konzept von Zwei-Wege-Data-Bindings abgedeckt. Hierfür bedarf es einem Skript wie Way.js, das ohne Abhängigkeiten auskommt und den gleichen Komfort wie etwa AngularJS in Sachen Data-Bindings bietet.

Way.js - Simple, lightweight, persistent two-way databinding

So genügt es, einem Formular-Element ein entsprechendes Attribut (way-data) zu geben, wodurch die Daten zusätzlich in einem JavaScript-Objekt gehalten werden. Das Ganze lässt sich mit einem weiteren Attribut auch persistieren, also in der localStorage des Browsers ablegen. Mit bestimmten Methoden können Daten aus einem JavaScript-Objekt in ein DOM-Element und umgekehrt übertragen werden:

  • way.dom("#someForm").toStorage();
  • way.dom("#someForm").fromStorage()

Weiterhin sind Watcher möglich, die mit einem Callback verbunden werden können, das ausgelöst wird, sobald sich ein Wert geändert hat. Mit Way.js lassen sich die komfortablen Data-Bindings also auch in Web-Projekten einsetzen, die nicht auf einem MVW-Framework aufbauen.