Backbone -Sammlung erhalten keine Modelle

Question

Grundsätzlich versuche ich, eine GET -Anfrage an meinen Knotenserver zu senden, damit ich Blog -Posts zurückbekommen kann, um Links zu erstellen. Ich mache a collection.fetch, was erfolgreich die GET -Anforderung vervollständigt (die Node -Server protokolliert, die die richtigen Objekte sendet). Das Modell analysiert erfolgreich die richtigen Daten, aber wenn ich versuche, die Sammlung zu verwenden, heißt es, dass es leer ist. Hier ist der Code:

var mdm = mdm || {};

// MODEL
mdm.Post = Backbone.Model.extend({
        parse: function( response ) {
        response.id = response._id;
        console.log(response); // logs the two documents
        return response;
    }
});

// COLLECTION
mdm.Posts = Backbone.Collection.extend({
    model: mdm.Post,
    url: '/api/posts'
});

// MODEL VIEW
mdm.LinkView = Backbone.View.extend({
    template: _.template( $('#link_template').html() ),

    render: function() {
        this.$el.html( this.template( this.model.toJSON() ));
        return this;
    }
});

// COLLECTION VIEW
mdm.LinksView = Backbone.View.extend({
    el: '#link_list',

    initialize: function() {
        this.collection = new mdm.Posts();
        this.collection.fetch({reset: true});
                // makes the request properly, but collection is empty
        this.render();
                // never gets called because the collection is empty
        console.log(this.collection.length); 
                // logs a length of 0
    },

    render: function() {
        // renders collection
    }
});

$(function() {
    new mdm.LinksView();
});

Die Daten werden gesendet und werden in den Modellen analysiert, daher bin ich mir nicht sicher, was die Sammlung leer ist. Jede Hilfe wäre sehr geschätzt.

Answer 1

Der wahrscheinlichste Grund, warum Sie die Modelle nicht aus Ihrer Sicht sehen, ist, dass das Render vor dem Asynchronen stattfindet fetch ist komplett.

Etwas wie unten würde besser funktionieren:

mdm.LinksView = Backbone.View.extend({
    el: '#link_list',

initialize: function() {
    this.collection = new mdm.Posts();
    this.listenTo(this.collection, 'reset', this.render);
    this.collection.fetch({reset: true});
}

Der obige Code legt einen Hörer für die fest reset Ereignis auf der collection und führt die aus render Funktion, wenn das passiert.

Außerdem könnten Sie vorbeikommen success und error Handler in fetch und rufen Sie auch die Renderfunktion manuell an.

this.collection.fetch({
    success: _.bind(function() { 
        this.render(); }, this)
});

Hoffe das hilft!

Answer 2

Per @fbynite von Kommentar war das Problem mit dem Problem zusammengefasst fetch asynchron sein. Ich habe die folgenden Änderungen an der Sammlungsansicht vorgenommen, und es hat den Trick gemacht:

initialize: function() {
    var self = this;
    this.collection = new mdm.Posts();
    this.collection.fetch({reset: true,
        success: function() {
            self.render();
            console.log(self.collection.length);
        }
    });
},

Der Code ist eine Änderung eines Backbone -Tutorials, sodass andere Benutzer auf ein ähnliches Problem stoßen können. http://addyosmani.github.io/backbone-Fundamentals/#exercise-2-book-library ---your-first-restful-backbone.js-app