Collection de rendu Backbone.js dans View

Question

J'ai une collection Backbone que j'essaie de rendre dans la vue. Les données JSON semblent correctes, mais je ne peux pas accéder aux valeurs à partir de la vue.

est ici la collection de base:

define(['backbone', 'BaseModel'], function(Backbone, BaseModel) { 

    var BaseCollection = Backbone.Collection.extend({ 

     model: BaseModel, 
     url: "/collection/get?json=true", 

     initialize: function() {} 
    }); 

    return BaseCollection; 

}); 

est ici la vue:

define(['backbone', 'BaseCollection'], function(Backbone, BaseCollection) { 

    var BaseView = Backbone.View.extend({ 

     el: $('#baseContainer'), 
     template: _.template($('#baseTemplate').html()), 

     initialize: function() { 
      _.bindAll(this); 
      this.collection = new BaseCollection(); 
      this.collection.bind('all', this.render, this); 
      this.collection.fetch(); 
     }, 
     render: function() { 

      //This returns 3 objects which is correct based on the JSON data being returned from the server 
      console.log(this.collection.toJSON()); 

      var html = this.template(this.collection.toJSON()); 
      this.$el.html(html); 
      return this; 
     }, 

    }); 

    return BaseView; 

}); 

Je pense que je dois itérer this.render pour chaque modèle de la collection. Mais, je ne suis pas sûr, parce qu'il ne devrait pas «rendre» jusqu'à ce qu'il complète toutes les itérations.

Toutes les suggestions seraient super! Je vous remercie!

Answer 1

Vous devez donner votre modèle d'accès aux modèles via le nom. Lorsque vous faites ceci:

var html = this.template(this.collection.toJSON()); 

Vous finissez par passer un tableau à la fonction template qui attend normalement un objet de contexte (paires nom/valeur). Essayez ceci:

var html = this.template({collection: this.collection}); 

Ensuite, dans votre modèle, vous pouvez itérer les utiliser la fonction collection.each iterator ou l'une des méthodes utilitaires pour underscore itération/filtrage/carte/etc. Je recommande également de ne PAS utiliser toJSON lorsque vous donnez à votre modèle un accès à la collection car cela rend vos données plus difficiles à utiliser. Il vaut mieux laisser le toJSON lorsque vous effectuez des requêtes HTTP.