backbone：渲染此集合

Question

var Text = Backbone.Model.extend({}); 

Texts = Backbone.Collection.extend({ 
    model: Text, 
    url: '/data.json', 
}); 

var TextsView = Backbone.View.extend({ 
    initialize: function() { 
     _.bindAll(this); 
     this.render(); 
    }, 
    el: "#Texts", 
    template: _.template($('#TextTemplate').html()), 
    render: function(e){ 
     _.each(this.model.models, function(Text){ 
      var TextTemplate = this.template(Text.toJSON()); 
      $(this.el).append(TextTemplate); 
     }, this); 
     return this; 
    } 
}) 

var Texts = new Texts(); 
Texts.fetch(); 
var TextView = new TextsView({collection: Texts}); 

這給我Uncaught TypeError: Cannot read property 'models' of undefined並且不在頁面上顯示任何內容。

Answer 1

這this.model.models應該this.collection

在渲染處理方法在你看來，你應該使用的this.collection.each代替_.each功能。

render: function(e){ 
    this.collection.each(function(Text){ 
     var TextTemplate = this.template(Text.toJSON()); 
     $(this.el).append(TextTemplate); 
    }, this); 
    return this; 
} 

如果你想使用_.each功能，那麼您就需要直接訪問模型數組您的收藏作爲@dfsq指出。這可以通過使用this.collection.models來完成。

render: function(e){ 
    _.each(this.collection.models, function(Text){ 
     var TextTemplate = this.template(Text.toJSON()); 
     $(this.el).append(TextTemplate); 
    }, this); 
    return this; 
} 

EDIT 2

這裏有一些原因，你的抓取通話可能無法正常工作。首先檢查您是否使用Web服務器，因爲使用文件系統出於安全原因可能會阻止Ajax請求。我知道這在Chrome中被阻止，除非您更改某個設置。不確定關於Firefox。

第二個原因是提取call是異步的。這意味着很可能您的數據在運行時不會被加載initialize

這意味着您需要進行以下調整。首先，您需要將監聽器添加到收藏夾的添加事件中，以便隨時添加項目，您的視圖將被通知。

initialize: function() { 
    _.bindAll(this); 
    this.render(); 
    // Listen to the `add` event in your collection 
    this.listenTo(this.collection,"add", this.renderText); 
}, 

接下來，我們需要添加一個功能，您認爲將呈現單個項目

renderText: function(Text) { 
    var TextTemplate = this.template(Text.toJSON()); 
    this.$el.append(TextTemplate);   
} 

還爲您解答的this在每個循環用戶的其他問題。每個函數中的最後一個參數是您希望在執行的回調函數內使用的範圍。因此，如果您使用this作爲第二個參數，則它允許您使用this訪問您的查看。

this.collection.each(function(Text){ 
     var TextTemplate = this.template(Text.toJSON()); 
     $(this.el).append(TextTemplate); 
    }, this); 

如果不加this，那麼你需要做：

var view = this; 
    this.collection.each(function(Text){ 
     var TextTemplate = view.template(Text.toJSON()); 
     $(view.el).append(TextTemplate); 
    });