Colección de troncos no obteniendo modelos

Question

Básicamente, estoy tratando de enviar una solicitud GET a mi servidor de nodo, para poder recuperar publicaciones de blog para crear enlaces. hago un collection.fetch, que exitosa completa la solicitud GET (el servidor de nodo registra que está enviando los objetos correctos). El modelo analiza con éxito los datos correctos, pero cuando intento usar la colección, dice que está vacío. Aquí está el código:

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

Los datos se envían y se analizan en los modelos, por lo que no estoy seguro de lo que la colección termina vacía. Cualquier ayuda sería muy apreciada.

Answer 1

La razón más probable por la que no está viendo los modelos en su opinión es porque el render está ocurriendo antes de lo asíncrono fetch Esta completo.

Algo como a continuación funcionaría mejor:

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

El código anterior establece un oyente para el reset evento en el collection y ejecuta el render función cuando eso sucede.

Además, podrías pasar success y error manejadores en fetch y llame a la función de renderizado manualmente también.

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

¡Espero que esto ayude!

Answer 2

Según el comentario de @fbynite, el problema estaba relacionado con fetch siendo asíncrono. Hice los siguientes cambios en la vista de la colección, e hizo el truco:

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

El código es una modificación de un tutorial de columna vertebral, por lo que otros usuarios pueden encontrar un problema similar. http://addyosmani.github.io/backbone-fundamentals/#exercise-2-book-library---your-first-fromful-backbone.js-app