Collezione spina dorsale non ottiene modelli

Question

Fondamentalmente, sto cercando di inviare una richiesta GET al mio server nodo, in modo da poter ottenere post sul blog per creare link. Faccio a collection.fetch, che completa correttamente la richiesta GET (i registri del server nodo che sta inviando gli oggetti giusti). Il modello analizza correttamente i dati giusti, ma quando provo a utilizzare la raccolta, dice che è vuoto. Ecco il codice:

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();
});

I dati vengono inviati e vengono analizzati nei modelli, quindi non sono sicuro di cosa finisca la raccolta. Qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

Il motivo più probabile che non vedi i modelli a tuo avviso è perché il rendering sta accadendo prima dell'asincrono fetch è completo.

Qualcosa come sotto funzionerebbe meglio:

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});
}

Il codice sopra imposta un ascoltatore per il reset evento sul collection ed esegue il render funzione quando ciò accade.

Inoltre, potresti passare success e error gestori in fetch E chiama anche la funzione di rendering manualmente.

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

Spero che sia di aiuto!

Answer 2

Per commento di @fbynite, il problema era correlato a fetch essere asincroni. Ho apportato le seguenti modifiche alla vista della raccolta e ha fatto il trucco:

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

Il codice è una modifica da un tutorial sulla spina dorsale, quindi altri utenti possono riscontrare un problema simile. http://addyosmani.github.io/backbone-fundamentals/#exercise-2-book-library---your-first-restful-backbone.js-app