Coleção Backbone não obtendo modelos

Question

Basicamente, estou tentando enviar uma solicitação GET ao meu servidor Node, para que eu possa recuperar postagens do blog para criar links.eu faço um collection.fetch, que conclui com êxito a solicitação GET (o servidor Node registra que está enviando os objetos corretos).O modelo analisa com sucesso os dados corretos, mas quando tento usar a coleção, ele diz que está vazio.Aqui está o 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();
});

Os dados estão sendo enviados e analisados ​​nos modelos, então não tenho certeza de que a coleção acaba ficando vazia.Qualquer ajuda seria muito apreciada.

Answer 1

A razão mais provável pela qual você não está vendo os modelos em sua visualização é porque a renderização está acontecendo antes do assíncrono. fetch está completo.

Algo como abaixo funcionaria melhor:

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

O código acima define um ouvinte para o reset evento no collection e executa o render funcionar quando isso acontecer.

Além disso, você poderia passar success e error manipuladores em fetch e chame a função render manualmente também.

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

Espero que isto ajude!

Answer 2

Pelo comentário de @fbynite, o problema estava relacionado a fetch sendo assíncrono.Fiz as seguintes alterações na visualização da coleção e funcionou:

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

O código é uma modificação de um tutorial do Backbone, então outros usuários podem encontrar um problema semelhante. http://addyosmani.github.io/backbone-fundamentals/#exercise-2-book-library---your-first-restful-backbone.js-app