Mit Backbone.js ist es möglich JavaScript-Web-Apps nach dem MVC-Prinzip aufzubauen. Dadurch kann die komplette Verwaltung der Daten von diesem Framework erledigt werden und es kümmert sich zudem auch darum #-URLs (Fragmentbezeichner heißt das Ding) auszuliefern.
Model
Über das Model wird die Struktur der Daten definiert. Außerdem wird die Adresse festgelegt, an die die Ajax-Anfragen gerichtet werden. Im Objekt defaults werden die Standardwerte, oder, wenn diese leer bleiben, die Existenz der Felder definiert.
1var UserModel = Backbone.Model.extend({
2 urlRoot: 'data/users',
3 defaults: {
4 username: '',
5 name: ''
6 }
7});Collection
Mit Sammlungen (Collections) werden mehrere Einheiten eines Models gespeichert. Hierbei wird das Model der Daten angegeben und wiederum die URL, unter der mit Ajax die Liste der Daten abgerufen werden können.
1var UsersCollection = Backbone.Collection.extend({
2 model: UserModel,
3 url: 'data/users'
4});
5
6var users = new UsersCollection();Über die fetch - Funktion können die Daten abgerufen werden.Die Daten können dann in der success - Funktion verarbeitet werden.Über .get("<feld>")
lässt sich der Wert eines Feldes abrufen.
1users.fetch({
2 success: function(items) {
3 items.each(function(item) {
4 alert(item.get("username"));
5 });
6 }
7});Router
Über so genannte Router lassen sich die verschiedenen URLs definieren und mit dem gewünschten JavaScript-Code verbinden. Mit Backbone.history.start() stellt man sicher, dass die URLs auch im Verlauf des Browsers auftauchen.
1var AppRouter = Backbone.Router.extend({
2 routes: {
3 ":user": "user", // Ein Benutzer (/muster)
4 "": "users" // Alle Benutzer (/)
5 },
6
7 user: function() {
8 // magic
9 },
10
11 users: function() {
12 // other magic
13 }
14});
15
16Backbone.history.start();Views
Backbone.js ermöglicht es Views mit Templates zu laden. Dazu definiert man einen script-Tag mit dem type-Attribut text/template. Darin kann man Platzhalter für Variablen einfügen, die zwischen <%= und %> stehen.
1<script type="text/template" id="template-user">
2 <h1><%= username %></h1>
3</script>Den eigentlichen View erzeugt man wie folgt:
1var UserView = Backbone.View.extend({
2
3 initialize: function() {
4 this.template = _.template($("#template-user").html());
5 },
6
7 render: function(eventName) {
8
9 var data = {
10 test: "abc"
11 }
12
13 $(this.el).html(this.template(data));
14 return this;
15 }
16});
17
18var user = new UserView({
19 model: User
20});
21
22user.render();Dabei wird in der initialize-Funktion das Template aus dem Script-Tag geladen und in der Variable this.template gespeichert. In der Funktion render wird das Template befüllt und anschließend zur Seite hinzugefügt. Die Daten werden direkt aus dem Model geholt, das auch bei der Konstruktion des Views angegeben wird.
Es können jedoch auch erst in der Render-Funktion Template-Variablen deklariert werden, die in als Objekt, in diesem Beispiel data, das der this.template()-Funktion übergeben wird.
Fazit
Das Backbone.js Framework stellt eine große Erleichterung dar und macht es möglich sich auf die eigentliche Entwicklung einer App zu konzentrieren, anstatt sich mit wiederkehrenden Aufgaben und Problemen befassen zu müssen. Vor allem der Umgang mit den Daten ist so klar strukturiert und macht keine Programmierung der oft umfangreichen Ajax-Anfragen nötig.
Als Voraussetzung ist die jQuery-Bibliothek vonnöten, die jedoch in vielen Fällen bereits verwendet wird und sich bereits zu einem Quasi-Standard etabliert hat.