Quellcode strukturieren mit Backbone
Kommentare

Die Collection
Im Augenblick stehen uns lediglich ein Model und eine View zur Verfügung. Will man eine Reihe von Datensätzen verwalten, reicht das natürlich bei Weitem nicht aus. Hier kommt eine weitere

Die Collection

Im Augenblick stehen uns lediglich ein Model und eine View zur Verfügung. Will man eine Reihe von Datensätzen verwalten, reicht das natürlich bei Weitem nicht aus. Hier kommt eine weitere Komponente von Backbone zum Einsatz: die Collection. Eine Collection stellt eine Sammlung von Objekten des gleichen Typs dar; um genauer zu sein, sind es Instanzen des gleichen Models. Man kann sich eine Collection also als eine Liste von Models vorstellen. An sich ist das nichts, was man nicht auch mit einem einfachen Array oder einer Objektstruktur erreichen könnte, und hier ist man nicht nur auf einen Objekttyp festgelegt. Die Collection ist allerdings weit mehr als nur ein Container. Vielmehr steht eine Vielzahl von Hilfsfunktionen zur Verfügung, auf die im Folgenden näher eingegangen wird.

Grundsätzlich empfiehlt es sich, einer Collection eine View zuzuweisen, ähnlich wie bei einzelnen Models. Diese View ist dafür zuständig, die Collection korrekt anzuzeigen. Wird ein Element zu einer Collection hinzugefügt oder wird ein Element entfernt, werden jeweils Events gefeuert, auf die sich die View binden und die Liste neu darstellen kann. Das bietet den Vorteil, dass die Collection ihre View nicht zwingend kennen muss, um sich neu darzustellen. Sobald die einzelnen Komponenten verbunden sind, also eine Collection ihre eigene View besitzt und weiß, welche Art von Models sie aufnehmen kann, kann damit begonnen werden, die Collection mit Elementen zu füllen. Das kann auf mehrere Arten erfolgen: Zum einen kann der Collection bei der Instanziierung ein Array von Models übergeben oder die Models können per add einzeln hinzugefügt werden. In Listing 4 erweitern wir nun unser Model/View-Konstrukt um eine Collection, sodass wir mit mehreren Adressen umgehen können.

Listing 4
scripts/application/models/addresses.js
AddressCollection = Backbone.Collection.extend({
    model: Address,
});
scripts/application/views/addresses.js
CollectionView = Backbone.View.extend({

    collection: null,

    initialize: function() {
        this.collection.bind('add', _.bind(this.render, this));
        this.collection.bind('remove', _.bind(this.render, this));
    },

    render: function() {
        this.collection.each(function(model) {
            model.view.render();
        });
    }

});

Mit ein paar Zeilen sind wir jetzt in der Lage, eine Sammlung von Models auf einmal anzuzeigen. Dazu sind noch ein paar kleine Anpassungen an unserem bestehenden Code notwendig: Das Model hat eine zusätzliche Eigenschaft view erhalten, durch die das Model seine View kennt. Die Collection bietet die Möglichkeit, über die each-Methode über die einzelnen Models der Collection zu iterieren. Über die view-Eigenschaft können nun die einzelnen Models dargestellt werden. In der initialize-Funktion wird jeweils die render-Methode auf das Collection-Event add und remove gebunden, um die Liste neu darzustellen, falls ein Element hinzugefügt oder entfernt wird. In Listing 5 sieht man, wie einfach es mittlerweile ist, auch mit mehr als einem Model zu arbeiten.

Listing 5: index.html
var charly = new Address({firstname: 'Charly', surname: 'Brown'});
charly.setView(new AddressView({model: charly}));

var sally = new Address({firstname: 'Sally', surname: 'Brown'});
sally.setView(new AddressView({model: sally}));

var lucy = new Address({firstname: 'Lucy', surname: 'van Pelt'});
lucy.setView(new AddressView({model: lucy}));

var peanuts = [charly, sally, lucy];

var addresses = new AddressCollection(peanuts);
var colView = new CollectionView({collection: addresses});
colView.render();

Themen der kommenden Seiten:

  • Hinzufügen, editieren und löschen
  • Der Controller
  • Mit dem Server sprechen
  • Ausblick
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -