javascript - Backbone 集合模型不可访问

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"
   }
]

View :

$(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 函数。这可以通过两种方式完成:

• 将 _.bindAll(this, "render") 添加到 CustomerListView initialize 方法。
• this.collection.bind('reset', this.render, this) - 添加 this 作为第三个参数。

编辑

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