0

花了很多小时，仍然无法弄清楚。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
});
4

2 回答 2

3

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

  1. 让您render足够聪明地处理空集合。
  2. 将您绑定render到集合的"reset"事件。

当你fetch，一个"reset"事件被触发：

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

因此，当服务器开始返回您的数据时，绑定到集合的"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；Backbone 集合混合了各种 Underscore 方法，因此您不妨使用它们。

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 需要它们。

于 2012-06-27T04:11:43.273 回答
0

首先，您将“this.collection.toJSON()”传递给 jquery 的元素选择器。jQuery 的 each 不能那样工作 - 你需要 $.each(this.collection.toJSON())。

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

此外，如果您使用的是骨干网，您可以使用下划线。我不确定这是否有任何区别，但下划线将使用本机 forEach（如果存在）（firefox、chrome），并将回退到 ie 和其他不具备该功能的浏览器。我不确定 jquery 是否这样做。因此，在这些情况下，速度肯定会有所提高。

于 2012-06-27T03:48:22.880 回答