Seite 3: Infrastrukturanbindung

Inhaltsverzeichnis

Anbinden von Infrastruktur

Ein Domänenmodell modellieren zu können, ist hilfreich, genügt für eine vollständige Anwendung jedoch nicht. In der Regel will man es zusätzlich persistieren, meist mit einem REST-Webdienst. Auch hierbei bietet Backbone.js seine Unterstützung an, denn Entitäten verfügen von Haus aus über eine save- und eine destroy-Funktion.

Die save-Funktion serialisiert die zu speichernde Entität und überträgt sie mithilfe einer AJAX-Anfrage im Hintergrund an den Webserver. Abhängig vom Rückgabewert der Funktion isNew der Entität entscheidet Backbone.js, ob es eine POST- oder eine PUT-Anfrage erzeugt – ob es also versucht, die Entität erstmalig zu speichern oder eine bestehende Version zu aktualisieren.

Analog erzeugt die destroy-Funktion eine DELETE-Anfrage, um die Entität vom Webserver zu löschen. Backbone.js benötigt dazu eine URL, an die es die Anfragen schicken kann. Diese URL setzt man mit Hilfe der url-Eigenschaft an der zugehörigen Liste:

var CustomerList = Backbone.Collection.extend({
  model: Customer,
  url: '/customers'
});

Backbone.js kombiniert die URL und die id-Eigenschaft der betroffenen Entität, um die eigentliche Adresse für eine Anfrage zu ermitteln. Auf dem prinzipiell gleichen Weg befüllt man eine Liste anfänglich mit Daten vom Webserver. Hierzu dient die Funktion fetch, die man allerdings nicht an einer Entität, sondern an der Liste aufruft.

Standardmäßig führt Backbone.js den Inhalt der bestehenden Liste mit den vom Webserver empfangenen Daten zusammen. Falls man die Liste von Grund auf neu aufbauen möchte, ist daher zusätzlich ein entsprechendes Parameterobjekt zu übergeben:

customers.fetch({ reset: true });

Im Hintergrund verwendet Backbone.js für den Datenabgleich mit dem Webserver eine interne Funktion namens Backbone.sync. Sie adressiert standardmäßig einen REST-basierten Webdienst. Bei Bedarf lässt sie sich allerdings durch eine eigene Implementierung ersetzen, um eine beliebige Synchronisationslogik bereitzustellen.

Dazu genügt es, Backbone.sync eine neue Funktion zuzuweisen, die der folgenden Signatur entspricht:

Backbone.sync = function (method, model, options) {
  // ...
};

Der Parameter method enthält einen der Werte create, read, update oder delete, der Parameter model hingegen die zu speichernde Entität oder die zu ladende Liste. options schließlich umfasst zusätzliche Optionen, die beim Speichern oder Laden von Daten zu beachten sind.

Alternativ besteht die Möglichkeit, eine derartige Funktion von einem Drittanbieter zu verwenden. So stellt beispielsweise das Projekt Backbone.localstorage eine Funktion zur Verfügung, die auf den lokalen Speicher des Webbrowsers zugreift. Die Integration ist denkbar einfach: Man muss nach dem Laden der Datei backbone.js lediglich die Datei backbone.localstorage.js laden, die die Funktion Backbone.sync wie gewünscht ersetzt:

  [...]
  <script type="text/javascript" src="backbone.js"></script>
  <script type="text/javascript" src="backbone.localstorage.js"></script>
</body>
[...]

Interessant ist darüberhinaus auch die Möglichkeit, über die Funktion Backbone.ajax eine eigene AJAX-Anbindung anzulegen, beziehungsweise mithilfe der Funktionen Backbone.emulateHTTP und
Backbone.emulateJSON die Kompatibilität zu einigen Webservern verbessern zu können.