Collection de la colonne vertébrale n'obtenant pas de modèles

Question

Fondamentalement, j'essaie d'envoyer une demande GET à mon serveur de nœuds, afin que je puisse récupérer les articles de blog pour créer des liens. je fais un collection.fetch, qui réussit termine la demande GET (le serveur de nœuds se connecte qu'il envoie les bons objets). Le modèle analyse avec succès les bonnes données, mais lorsque j'essaie d'utiliser la collection, elle dit qu'elle est vide. Voici le 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();
});

Les données sont envoyées et sont analysées dans les modèles, donc je ne sais pas ce que la collection finit par être vide. Toute aide serait grandement appréciée.

Answer 1

La raison la plus probable que vous ne voyez pas les modèles à votre avis est que le rendu se produit avant l'asynchrone fetch est complet.

Quelque chose comme ci-dessous fonctionnerait mieux:

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

Le code ci-dessus définit un auditeur pour le reset événement sur le collection et exécute le render fonction lorsque cela se produit.

Aussi, vous pourriez passer success et error les gestionnaires fetch Et appelez également la fonction de rendu manuellement.

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

J'espère que cela t'aides!

Answer 2

Per comment le commentaire de Fbynite, le problème était lié à fetch étant asynchrone. J'ai apporté les modifications suivantes à la vue de la collection, et elle a fait l'affaire:

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

Le code est une modification d'un didacticiel de la colonne vertébrale, afin que d'autres utilisateurs puissent rencontrer un problème similaire. http://addyosmani.github.io/backbone-fundamentals/#exercise-2-book-library--- your-first-restful-backbone.js-app