Question

花了很多时间仍然无法弄明白。 sampleData.json文件包含以下json对象。

[{name: "Tim", age: 5},{name: "Ida", age: 26},{name: "Rob", age: 55}]

为什么这些数据在集合对象中不可用？

var ListCollection = Backbone.Collection.extend({
    url: '/sampleData.json'
});



var ListView = Backbone.View.extend({
    el: $('#file-list'),
    initialize: function () {
        _.bindAll(this, 'render');
        this.render(); 
},
render: function() {
    $(this.collection.toJSON()).each(function(key, val) {
        console.log(val['name']);
    });
}
});

var list = new ListCollection();

list.fetch();

var listView = new ListView({
    collection: list
});

Answer 1

您的list.fetch()调用实际上是一个AJAX调用，所以当您尝试在视图中使用this.collection时，无法保证它会从服务器检索任何内容。通常的方法有两个组成部分：

让您的render足够聪明，可以使用空集合。
将您的render绑定到收藏集的"reset"活动。

当您fetch，a "reset" event is triggered：

当模型数据从服务器返回时，该集合将重置。

当服务器到处返回您的数据时，绑定到集合的"reset"事件将触发对您的视图render的调用。

所以你想要更像这样的东西：

var ListView = Backbone.View.extend({
    el: $('#file-list'),
    initialize: function () {
        _.bindAll(this, 'render');
        this.collection.on('reset', this.render);
        this.render(); 
    },
    render: function() {
        // Whatever really happens here should be able to handle an empty collection.
        this.collection.each(function(m) {
            console.log(m.get('name'));
        });
        return this; // This is conventional, it is expected of you that you do this.
    }
});

你会注意到我已经从jQuery的each切换到了Underscore的each; 骨干集合有various Underscore methods mixed in，所以你也可以使用它们。

Backbone是一个基于事件的系统，因此如果您遇到问题，请先查看您的事件处理（或缺少事件处理）。

此外，这：

[ {name: "Tim", age: 5}, {name: "Ida", age: 26}, {name: "Rob", age: 55} ]

是JavaScript，而不是JSON，有一点点差异。您的sampleData.json应如下所示：

[{"name":"Tim","age":5},{"name":"Ida","age":26},{"name":"Rob","age":55}]

记下对象中键的引号，JSON需要它们。

Answer 2

首先，您将'this.collection.toJSON（）'传递给jquery的元素选择器。 jQuery的每个都不会那样 - 你需要$ .each（this.collection.toJSON（））。

其次，如果我错了，请纠正我，但如果你在构造函数中传递它，就不能简单地使用this.collection。你必须使用this.options.collection。

此外，如果您使用骨干，您可以随时使用。我不确定这是否有任何区别，但是下划线将使用原生forEach（如果它存在）（firefox，chrome）并且会回归ie和其他没有这种能力的浏览器。我不确定jquery会这样做。因此，在这些情况下，速度肯定会提高。

backbone.js无法从集合中读取

2 个答案: