骨干集合模型不可访问

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中。你的意思是'上'吗？