Allgemeiner Modulaufbau

Auch im Frontend verfolgten wir den modularen Ansatz, welcher es ermöglicht, Module voneinander unabhängig zu entwickeln, zu testen und zu veröffentlichen.

Jedes Modul liegt unter „js/modules“ in einem eigenen Ordner und wird aufgeteilt in die Unterordner model, router, template, und view. In diesen Unterordnern befinden sich jeweils die Models, Collections, Router, Templates und Views für dieses eine Modul.

In „modules.js“ muss der Pfad zur „module.js“ des einzubindenden Modules eingetragen werden, um es zu registrieren.

Router

Der Router verwaltet die URL-Änderungen für ein Modul und reagiert, wie eingangs schon erwähnt, auf sich ändernde URLs und führt eine Funktion aus, welche auf das Fragment registriert wurde. In den meisten Fällen wird eine neue View geladen.

View

In der View werden zusätzliche Bibliotheken und Models geladen, welche bisher noch nicht benötigt wurden. So zum Beispiel das Handlebars-Template. Das Template wird mit Hilfe von RequireJS an die View übergeben, dort wird es kompiliert und in einem Attribut namens „template“ gespeichert. Während der Initialisierung wird eine neue Collection erstellt und an das „reset“- Event gebunden. Sobald sich die Collection ändert, wird auch die View neu gerendert.

Die Render-Funktion holt das Handlebars-Template, reichert dieses mit den Daten aus dem Model an und fügt das neu erstellte HTML in den von Backbone erstellten Knoten ein.

Weiter wird in der View das HTML-Tag, die Klasse und ID festgelegt. Wird kein HTML-Tag definiert, so wird standardmäßig ein div-Tag verwendet. Der Titel für den Header jeder View wird im „title“-Attribute definiert.

Am Ende benötigt die Funktion einen Rückgabewert, welcher immer die View darstellt.

Model

Das Model holt die Daten über eine RESTful API vom Server. Über das url- Attribut wird die Adresse definiert. Die Parse-Funktion dient dazu, die Antwort vor dem Übergeben an die View zu bearbeiten. Dies kommt bei einigen Modulen regelmäßig vor, wenn beispielsweise die Antwort gefiltert oder sortiert werden muss. Dabei hilft Underscore mit zum Beispiel den Funktionen sortBy und filter. Das Ergänzen der Antwort mit weiteren Daten ist auch durchaus denkbar und wird für das Mensa-Modul praktiziert.

Template

Um das HTML vom JavaScript zu separieren und den Code dadurch besser lesen und pflegen zu können, wird das Markup in einer Datei mit der Endung „.hbs“ gespeichert und mit Platzhaltern für die nachträglich eingefügten Daten aus dem Model versehen.

Handlebars greift auf die Daten des Models über das Attribut, welches in der Render-Funktion der View angegeben wird, zu.

Beispiel

In der Render-Funktion der View wird folgendes aufgerufen:

this.el.innerHTML = this.template({
        dish: this.collection.toJSON(),
        id: 1
});

In Handlebars kann mit dem Parameter {{#dish}} direkt auf die Objekte zugegriffen werden. Alles was zwischen {{#dish}} und {{/dish}} liegt, adressiert dieses Objekt. Weitere Objekte, wie beispielsweise die id, lassen sich innerhalb mit {{../id}} und ausserhalb des oben genannten Objektes mit {{id}} anzeigen.