Quellcode strukturieren mit Backbone
Kommentare

Hinzufügen, editieren und löschen
Das Komfortable an den Methoden zum Füllen von Collections ist, dass sowohl initial als auch zur Laufzeit des Scripts über die add-Methode nicht nur ein Model, sondern

Hinzufügen, editieren und löschen

Das Komfortable an den Methoden zum Füllen von Collections ist, dass sowohl initial als auch zur Laufzeit des Scripts über die add-Methode nicht nur ein Model, sondern ein ganzes Array von Models hinzugefügt werden kann. Eine weitere Art, um Models in eine Collection aufzunehmen, ist die create-Methode: Sie erhält als Parameter ein Objekt mit den Eigenschaften des neuen Objekts und verhält sich damit genau wie der Konstruktor eines Models. Der Rückgabewert ist das eben erstellte Model.

Um einzelne Models innerhalb einer Collection zu bearbeiten, muss zuerst eine Referenz auf das Model aus der Collection geholt werden. Zu diesem Zweck existiert die Methode get. Der Parameter dieser Methode ist der Wert des ID-Attributs des gesuchten Models. Der Rückgabewert ist eine Referenz auf das Model. Hier gibt es allerdings eine Kleinigkeit zu beachten: Wurde das Model noch nicht auf dem Server gespeichert, besitzt es noch keine eindeutige ID. In diesem Fall funktioniert die get-Methode nicht. Zur Lösung dieses Problems existiert die getByCid-Methode, um Models, denen noch keine feste ID zugewiesen wurde, in einer Collection zu finden. Die cid-Eigenschaft wird von Backbone automatisch für Models generiert, die auf dem Client erstellt wurden, und dient als temporäre ID. Ansonsten ist die Funktionsweise die gleiche wie bei get. Da die Models per Referenz aus der Collection gelesen werden, wirken sich Änderungen direkt auf die Instanzen innerhalb der Collection aus und müssen nicht separat zurückgeschrieben werden.

Das Entfernen eines Models aus einer Collection kann auf zwei verschiedene Arten erreicht werden: entweder über die remove-Methode der Collection oder die destroy-Methode des Models. Die remove-Methode der Collection erlaubt es, mehrere Models gleichzeitig aus der Collection zu entfernen. Dafür muss lediglich statt dem zu entfernenden Model ein Array von Models als Parameter übergeben werden. Der Aufruf führt dazu, dass die Collection ein remove-Event wirft, auf das sich die View binden kann, um sich neu darzustellen. Die zweite Variante, die destroy-Methode des Models, löscht das Model selbst und benachrichtigt die Collection des Models von der Löschung, was zum Aufruf von remove in der Collection führt (Listing 6).

Listing 6
scripts/application/views/address.js
_template: '...edit delete',
...
events: {
    'click a.edit': 'edit',
    'click a.delete': 'remove'
},
...
edit: function(e) {
    e.preventDefault();
    $('#id').val(this.model.cid);
    $('#inputFirstname').val(this.model.get('firstname'));
    $('#inputSurname').val(this.model.get('surname'));
},

remove: function(e) {
    e.preventDefault();
    this.model.destroy();
}
scripts/application/views/edit.js
Edit = Backbone.View.extend({

    tagName: 'li',
    className: 'addressView',
    _template: '',

    collection: null,

    setCollection: function(collection) {
        this.collection = collection;
    },

    events: {
        'click input#submit': 'save'
    },

    render: function() {
        $('body').append($(this.el).html(this._template));
    },

    save: function() {
        if ($('#id').val() == '') {
            var model = this.collection.create({firstname: $('#inputFirstname').val(),
                                                surname: $('#inputSurname').val()});
            model.setView(new AddressView({model: model}));
        } else {
            var model = this.collection.getByCid($('#id').val());
            model.set({firstname: $('#inputFirstname').val(),
                         surname: $('#inputSurname').val()});
        }
        $('#inputFirstname').val('');
        $('#inputSurname').val('');
        $('#id').val('');
    }
});

Um die beschriebenen Aktionen auch in unserem kleinen Beispiel testen zu können, führen wir eine Edit View ein, die ein Formular zur Anzeige und zum Bearbeiten von Werten zur Verfügung stellt. Außerdem wird die View des Models dahingehend erweitert, dass neben jedem Eintrag ein Link zum Bearbeiten und einer zum Löschen existiert. Backbone bietet innerhalb der View die Möglichkeit, über die Eigenschaft events bestimmte Events innerhalb des Templates auf einzelne Methoden der View zu mappen. In unserem Fall werden dadurch die beiden Links mit Funktionalität hinterlegt. Ein Klick auf DELETE führt dazu, dass die View die destroy-Methode des eigenen Models aufruft und es so aus der Collection entfernt. edit lädt die Werte des Models in die neue Edit View, die sich dann um das Speichern der veränderten Werte nach dem Abschicken des Formulars kümmert.


Themen der letzten Seite:

  • Der Controller
  • Mit dem Server sprechen
  • Ausblick
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -