|
Backbone.js
Backbone.js ist eine JavaScript-Bibliothek mit RESTful-JSON-Schnittstelle. Backbone basiert auf dem Model-View-Controller-Muster (MVC). Backbone ist für seine geringe Größe bekannt und nur von der JavaScript-Bibliothek[2] Underscore.js abhängig. Backbone wird zur Programmierung von Single-Page-Webanwendungen und zur Synchronität von Webanwendungen (z. B. verschiedene Clients und Server) verwendet. Backbone wurde von Jeremy Ashkenas geschaffen, der ebenso der initiale Autor von CoffeeScript ist. Architekturvorgaben Eine Backbone-Anwendung besteht aus den Elementen Model, Collection, View und Router. Das Interaktionsmuster von Backbone kann dem MVC-Muster zugeordnet werden. Model und View werden gemäß dem MVC-Muster umgesetzt. Allerdings fehlen konkrete Controller-Instanzen bei der Umsetzung. Dies hat folgende Gründe:
KonzeptBackbone gibt vier verschiedene Strukturierungselemente zur Realisierung einer Single-Page-Webanwendung vor. Das Fachmodell wird clientseitig durch Model und Collection-Klassen abgebildet. Bei Backbone beinhalten die Model-Objekte die Fachkonzeptdaten sowie Programmlogiken, welche direkt auf eine Model-Instanz operieren. Dies kann beispielsweise eine Datenvalidierung des Modells, die Definition von abgeleiteten Attributen, Zugriffskontrollen oder eine andere fachliche Funktionalität sein. Der nachfolgende Codeausschnitt zeigt die Implementierung eines Modells. Backbone bietet hierzu die Oberklasse
var Person = Backbone.Model.extend({
urlRoot: '/persons',
defaults: {
firstname: '',
name: '',
isReadonly: false
},
initialize: function() {
console.log('Konstruktur-Code');
},
validate: function(attribs) {
if (attribs.name === undefined || attribs.name === '') {
return 'Bitte einen Namen angeben.';
}
},
allowedToEdit: function() {
return !this.get('isReadonly');
}
});
Diese Oberklasse liefert verschiedene Basisoperationen zum Umgang mit einem Model. Hierzu gehören beispielsweise die Methoden get und set zum Abrufen und Setzen von Attributen. Die Oberklasse definiert ebenfalls ein ID-Attribut zur Adressierung der Objekte. Bei clientseitig neu erfassten Objekten erfolgt eine temporäre Vergabe einer Client-ID. Über die Collections sind ein weiteres Strukturierungselement zur Abbildung des Fachkonzepts. Eine Collection verwaltet eine Menge von Model-Instanzen. Die logische Typisierung einer Collection erfolgt über das model-Attribut. Hierdurch kann Backbone erkennen, welche Art von Model-Instanz verwaltet wird. Wie bei der Model-Oberklasse werden verschiedene Basisfunktionalitäten von der Backbone.Collection-Klasse geerbt. Hierzu gehören beispielsweise die Funktionen
var PersonCollection = Backbone.Collection.extend({
url: '/persons',
model: Person,
onlyEditable: function() {
return this.filter(function(person) {
return person.allowedToEdit();
});
},
comparator: function(person) {
return person.get('name');
}
});
Ebenfalls möglich ist die Angabe einer URL zum serverseitigen Abruf der Daten. Ausgeführt wird der Abruf der Listenelemente einer Collection durch die fetch-Methode der Basisklasse.
Als drittes Element in einer Backbone-Anwendung ist der Router aufzuführen. Der Router ist für die clientseitige Navigation innerhalb der SPA verantwortlich. Für eine SPA-Anwendung wird eine Router-Instanz erzeugt. Diese Instanz verwaltet sämtliche Linkaktionen innerhalb der Anwendung. Hierdurch ist ebenfalls eine Navigation über die Webbrowser-Schaltflächen möglich. Als Nebenprodukt entstehen zusätzlich bookmarkfähige Links. Der nachfolgende Codeausschnitt veranschaulicht die Implementierung eines Routers mit Backbone. Hierbei wird von der Oberklasse
var Router = Backbone.Router.extend({
routes: {
"": "home",
"edit/:id": "edit",
"new": "edit"
},
// Aktionsdefinition bei der home-Navigation
home: function() {
userListView.render();
},
// Aktionsdefinition bei der new- und edit-Navigation
edit: function(id) {
userEditView.render({id: id});
}
});
// Aktivierung der globalen Linkbehandlung mit Backbone + History API
Backbone.history.start({pushState: true});
Die View in einer Backbone-Anwendung beinhaltet keinen HTML-Code. Sie beinhaltet Präsentationslogik zur Reaktion auf Benutzereingaben und ist für DOM-Manipulationen verantwortlich. Die eigentliche Darstellung erfolgt durch die HTML-View. Die HTML-View wird allerdings häufig bei einer SPA von der View aus mit Inhalten aus dem clientseitigen Model befüllt. Hierbei kommt die Template-Technik von Underscore zum Einsatz. Die Ausdrücke der Templatesprache erlauben eine einfache clientseitige Generierung von HTML-Inhalten auf Basis von Modellinformationen. Diese Templates können Bestandteile der Bootstrapper-Seite der SPA sein oder mittels der Text-Erweiterung von RequireJS asynchron nachgeladen werden.
Backbone gibt im Rahmen der View drei Konventionen vor. Die erste Konvention bezieht sich auf das Haupt-DOM-Element, welches im Rahmen der aktuellen View verwaltet wird. Der CSS-Selektor für dieses DOM-Element soll in der Variable
var UserListView = Backbone.View.extend({
el: '.page',
template: _.template($('#user-list-template').html()),
events: {
'click .refresh': 'loadAndDisplayData' // Click-Aktion auf $('.refresh')
},
loadAndDisplayData: function() {
userCollection.fetch(); // Impliziert ein reset-Event auf der Collection
},
initialize: function() {
// Registrierung für Events der “userCollection”
this.listenTo(userCollection, 'add', this.addOneItem);
this.listenTo(userCollection, 'reset', this.addAllItems);
},
addOneItem: function(user) {
var view = new UserListItemView({model: user }); // Partielle View erzeugen
$('#userListBody').append(view.render().el); // Eintrag der Liste hinzufügen
},
addAllItems: function() {
this.$el.find('#userListBody').html(''); // Liste leeren
userCollection.each(this.addOneItem, this); // Alle Elemente neu hinzufügen
},
render: function() {
this.$el.html(this.template); // Haupt-Template der Seite hinzufügen
if (!userCollection.length) {
this.loadAndDisplayData(); // Einträge laden und anzeigen
} else {
this.addAllItems();
};
return this;
}
});
Die zweite Konvention besagt, dass ein verwendetes HTML-Template in der Variable VorkommenFolgende Webanwendungen wurden mit Backbone.js erstellt:[3]
Siehe auch
Literatur
WeblinksEinzelnachweise
|
||||||||||||||||||||||||
