© saicle/Shutterstock.com
Ein Experiment mit top, Backbone.js und RequireJS

topModel Backbone.js


Während die Ansprüche an komplexe Browseranwendungen steigen, werden die Java­Script-Bibliotheken und Frameworks schwergewichtiger. Dojo und Ext zum Beispiel decken große Teile denkbarer Funktionalität out of the Box schon ab, sind aber nicht immer die beste Wahl – vor allem wenn es darum geht, die Corporate Identity und ein eventuell vom Framework abweichendes Widget-Design umzusetzen.

An dieser Stelle kommt Backbone.js ins Spiel. Auf der Seite backbonejs.org gibt es neben der kompakten Dokumentation einige Links zu Webanwendungen, die mithilfe von Backbone.js entwickelt wurden. Alle diese Anwendungen sind individuell gestaltet und genau da liegt ja auch die Stärke dieses Mikroframeworks. Das leichtgewichtige Rückgrat besteht in unkomprimierter Form gerade mal aus 1431 Zeilen Quellcode inklusive der Kommentare. Es bietet hauptsächlich vier erweiterbare Prototypen im Backbone-Namensraum:

  • Backbone.Events

  • Backbone.Model

  • Backbone.Collection

  • Backbone.View

Events ist ein Mini-Eventmanager, von dem alle anderen Prototypen die drei Methoden on, off und trigger erhalten. Die Funktionalität ergibt sich aus den Methodennamen: Mit on wird eine beliebige Funktion an ein Event des erweiternden Objekts gebunden, mit off gelöst und mit mit trigger das Event angestoßen.

Models sind dafür vorgesehen, mit einem serverseitig implementierten REST API über HTTP synchronisiert zu werden, das ist aber kein Muss. Diese halten Attribute, die durch Standardwerte im Property defaults vorbefüllt werden können, sowie mit set gesetzt und get abgefragt werden. Beim Setzen von Attributen wird ein change-Event gefeuert, das optional auch unterdrückt werden kann. Darauf lauschende Objekte können dann die geänderten Attribute vom Model abrufen und sogar auf die letzten Werte vor der Änderung zugreifen. Anstelle von set kann auch save aufgerufen werden. Diese Methode leitet nach dem Ändern der Attribute weiter auf sync worin ein XHR-Objekt gebaut und abgeschickt wird. Dabei wird an einen URL geschickt, der sich aus dem Aufruf der Methode url des Models ergibt. Diese Methode gibt nach Vorgabe das urlRoot-Property des Models oder das url-Property einer Collection, in der das Model hängt, mit der id des Models zurück, sofern der Datensatz schon eine id besitzt, ohne diese andernfalls. Collection hält einige Methoden bereit, um eine Sammlung von Models zu verwalten. So können mit der Methode add zum Beispiel mehrere Models zur Col­lection hinzugefügt werden. Oder auch Models erzeugt und d...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang