Backbone.js渲染集合在視圖中

我有一個骨架集合，我試圖在視圖中渲染。 JSON數據似乎是正確的，但是我無法訪問視圖內的值。Backbone.js渲染集合在視圖中

下面是基本集合：

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

    var BaseCollection = Backbone.Collection.extend({ 

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

     initialize: function() {} 
    }); 

    return BaseCollection; 

});

這裏的景觀：

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; 

});

我想我需要通過this.render爲集合中的每個模型進行迭代。但是，我不確定，因爲它不應該「渲染」，直到它完成所有迭代。

任何建議將是偉大的！謝謝！

來源

2012-06-27 dzm

你能告訴我們你的模板嗎？我的猜測是你需要修改你傳遞給'this.template（）'的參數，或者修改模板本身。您可以在模板中使用'collection.each'來遍歷集合中的所有模型（但是，如果您將綁定大量特定於模型的事件，建議爲每個模型創建子視圖） – jackwanders

您需要讓您的模板通過名稱訪問模型。當這樣做：

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

你最終傳遞數組到template功能，這通常期望的上下文對象（名稱/值對）。試試這個：

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

然後在你的模板，你可以通過他們使用collection.each迭代函數或任何下劃線實用方法迭代/過濾/地圖/等迭代。我還建議在給模板訪問集合時不要使用toJSON，因爲它會使數據變得笨拙並且難以處理。 toJSON最適合您在發出HTTP請求時留下。

來源

2012-06-27 20:24:23

完美地工作，謝謝您！ – dzm

Backbone.js渲染集合在視圖中

回答

相關問題