Quellcode strukturieren mit Backbone
Kommentare

Die Struktur von Backbone
Backbone stellt eine leichtgewichtige Implementierung eines MVC Frameworks in JavaScript dar. Die klassische Aufteilung sieht hier vor, dass die Logik der Applikation in den Models

Die Struktur von Backbone

Backbone stellt eine leichtgewichtige Implementierung eines MVC Frameworks in JavaScript dar. Die klassische Aufteilung sieht hier vor, dass die Logik der Applikation in den Models gekapselt ist; die Anzeigelogik wird von den Views übernommen und der Controller ist dafür zuständig, die eingehenden Anfragen zu bearbeiten und die Models mit den Views zusammenzubringen. In Listing 2 ist eine Möglichkeit der Strukturierung einer Applikation zu sehen. Interessant ist hierbei vor allem die Hierarchie innerhalb des /scripts/-Verzeichnisses, das die JavaScript-Dateien der Applikation enthält. Sämtliche Voraussetzungen wie jQuery und Underscore aber auch die Quellen von Backbone selbst liegen im /library/-Verzeichnis, um sie ordentlich vom Rest der Applikation getrennt zu halten. Die eigentliche Applikation befindet sich im Verzeichnis /application/. In der ersten Ebene existiert die Datei router.js; sie wird später den Front Controller unserer Applikation enthalten. In früheren Backbone-Versionen war der Name der Basisklasse des Front Controllers noch Backbone. Controller. Der Name wurde im Verlauf der Entwicklung allerdings in Backbone.Router umbenannt, da diese Klasse nur noch das Routing innerhalb der Applikation übernimmt. Das Verzeichnis /models/ beinhaltet die Models der Applikation, genau wie /views/ die entsprechenden Views enthält.

Listing 2
├── index.html
├── style
│   └── style.css
└── scripts
    ├── application
    │ ├── router.js
    │ ├── models
    │ └── views
    └── library
        ├── backbone.js
        ├── jQuery.js
        └── underscore.js
Events

Ein wichtiger Bestandteil von Backbone sind Events. Ein Großteil der Kommunikation innerhalb einer Applikation, die mit Backbone umgesetzt wird, erfolgt über Events. Ein Event stellt dabei im Allgemeinen ein Ereignis dar, auf dessen Auftreten andere Teile der Software reagieren können. Events werden mithilfe der trigger-Methode eines Objekts geworfen. Der Methode können neben dem Namen des Events weitere Parameter übergeben werden, die direkt an die Callbacks weitergereicht werden. Über die bind-Methode des Objekts, das ein Event triggert, können Callbacks registriert werden, die bei Auftreten des Events aufgerufen werden. Zu diesem Zweck erhält die Methode als Parameter den Namen des Events, eine Referenz auf den Callback und den Kontext, in dem der Callback ausgeführt werden soll. Mittels unbind können Callbacks wieder entfernt werden. Es gibt hierbei die Option, nur einen Callback, alle Callbacks für ein bestimmtes Event oder alle Callbacks eines Objekts zu entfernen. Die Methoden trigger, bind und unbind werden durch Backbone.Event zur Verfügung gestellt. Alle relevanten Klassen wie Backbone.View, Backbone.Model oder auch Backbone.Collectionleiten von dieser Klasse ab und stellen diese Methoden somit ebenfalls zur Verfügung.

Models und Views

Der Kern einer Applikation wird durch Models und Views gebildet. Models beinhalten Daten und Operationen auf diese Daten. Views werden benutzt, um die Models darzustellen. In einer Applikation, die mit Backbone umgesetzt wird, sind einem Model ein oder mehrere Views zugeordnet. Das geschieht durch die model-Eigenschaft von Backbone.View, die meist bei der Instanziierung der Klasse übergeben wird und ein konkretes Model beinhaltet. Wie aber hängen nun Model und View in der Praxis zusammen? Ziel ist es, dass eine View den aktuellen Status eines Models visualisiert. Ändert sich ein Model, soll das dem Betrachter auch sofort angezeigt werden. Dieses Konstrukt wird mittels einer eventgetriebenen Architektur umgesetzt. Wird eine Eigenschaft eines Models über die set-Methode verändert, wird ein change-Event gefeuert. Die View bindet sich auf dieses change-Event des Models und kann so entsprechend auf Änderungen reagieren. Im Folgenden wird anhand einer beispielhaften Applikation die Verwendung der einzelnen Komponenten von Backbone gezeigt. Hierzu soll eine sehr einfache Adressenverwaltung aufgebaut werden, die im ersten Schritt lediglich die Vor- und Nachnamen von Personen anzeigt. In Listing 3 wird der Zusammenhang zwischen Model und View an einem konkreten Beispiel verdeutlicht. Im ersten Schritt werden die beiden Klassen eingebunden und damit verfügbar gemacht. Danach wird ein Knoten zum Einhängen der View geschaffen und ein Formular, über das das Model verändert werden kann. Im abschließenden script-Tag wird das Model instanziiert und die View im Konstruktor übergeben, die im Anschluss mittels Aufruf von render angezeigt wird. Um zu demonstrieren, wie sich eine Änderung des Models auswirkt, werden die Werte der Input-Felder bei einem Klick auf den Button mittels set in das Model geschrieben. In der initialize-Methode der View bindet die View ihre eigene render-Methode auf das change-Event ihres Models. Testet man die Anwendung, indem man einen beliebigen Namen eingibt und auf submit klickt, ändert sich der oben angezeigte Name.

Listing 3
index.html
  
     ...
       

    Unsere Redaktion empfiehlt:

    Relevante Beiträge

    Meinungen zu diesem Beitrag

    X
    - Gib Deinen Standort ein -
    - or -