骨幹集合模型不可訪問

Question

我在從一個url填充Backbone集合後，模型消失了。如果我只是將數組傳遞到集合中，代碼將起作用。

集合：

var CustomerList = Backbone.Collection.extend({ 
    model: Customer, 
    url: "/customer_list/json" 
}); 

的URL返回：

[ 
    { 
     "id":"870000", 
     "name":"vitae odio", 
     "contact_name1":"ame", 
     "contact_number1":"345634565246", 
     "contact_name2":"", 
     "contact_number2":"", 
     "address_line1":"Ap #489-8375 Ornare, Ave2", 
     "address_line2":"", 
     "town":"Stillwater", 
     "county":"Herefordshire", 
     "postcode":"JV5H 2QH", 
     "email":"parturient@vitae.edu", 
     "created_at":"0000-00-00 00:00:00", 
     "updated_at":"2012-08-18 16:44:36" 
    }, 
    { 
     "id":"870001", 
     "name":"mauris, aliquam", 
     "contact_name1":"Quail", 
     "contact_number1":"82733186940", 
     "contact_name2":null, 
     "contact_number2":null, 
     "address_line1":"Ap #921-368 Cras Ave", 
     "address_line2":null, 
     "town":"Lake Charles", 
     "county":"Essex", 
     "postcode":"AP6 0KZ", 
     "email":"vitae.dolor@Quisque.edu", 
     "created_at":"0000-00-00 00:00:00", 
     "updated_at":"0000-00-00 00:00:00" 
    } 
] 

的視圖：

$(function() { 

/* Customer View */ 
var CustomerView = Backbone.View.extend({ 
    tagName: 'tr', 
    className: 'customer-row', 
    template: _.template($('#customerRowTemplate').html()), 

    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this.el; 
    } 
}); 

/* Customer List View */ 
var CustomerListView = Backbone.View.extend({ 
    el: $('#customers'), 

    initialize: function() { 
     this.collection = new CustomerList(); 
     this.collection.bind('reset', this.render()); 
     this.collection.fetch(); 
    }, 

    render: function() { 
     console.log(this.collection); 
     console.log(this.collection.models); 

     _.each(this.collection.models, function(customer) { 
      this.renderCustomer(customer); 
     }, this); 
    }, 

    renderCustomer: function(customer) { 
     var customerView = new CustomerView({ 
      model: customer 
     }); 

     var html = customerView.render(); 

     this.$el.find('#customer-list').append(html); 
    } 
}); 

var customerList = new CustomerListView(); 

}); 

當調用的console.log（this.collection）;它顯示模型數組長度爲366，我可以查看檢查器中的所有模型。

但是，當調用console.log（this.collection.models）;它返回一個空數組。這意味着集合不會迭代，因此也不會呈現。再次，這工作正常，如果我只是手動通過客戶名單。

任何幫助將不勝感激。

Answer 1

的問題是在這裏：this.collection.bind('reset', this.render());

this.render()應該是this.render。在集合有機會獲取模型之前，使用圓括號可以在現場調用該函數。

您還應該將上下文傳遞給render函數。這可以通過2種方式完成：

• 將_.bindAll(this, "render")添加到CustomerListView initialize方法。
• this.collection.bind('reset', this.render, this) - 將this作爲第三個參數。

編輯

對於0.9.9及以上版本，使用this.listenTo(this.collection, 'reset', this.render)

Answer 2

您不需要綁定任何骨幹。它正在引擎蓋下正確使用不合適內容。你沒有正確使用每種方法。

此外，如果要綁定一個動作，你必須使用功能名稱，而不是執行它：的

this.collection.bind('reset', this.render); 

代替

this.collection.bind('reset', this.render()); 

我也想嘗試：

initialize: function() { 
    this.collection = new CustomerList(); 
    this.collection.fetch(); 
}, 

render: function() { 
    console.log(this.collection); 
    console.log(this.collection.models); 

    this.collection.each(function(customer) { 
     this.renderCustomer(customer); 
    }); 
} 

你想要什麼「重置」？綁定函數不在Backbone API中。你的意思是'上'嗎？