Backbone.js：仅从 JSON 集合 fetch 中添加新模型

Question

我有一个基于 Backbone.js 的 web 应用程序和一个列表。列表的条目来自 REST API。此列表（JSON 数组）会不时更新。我也想在前端更新我的列表，而不需要重新加载页面。

我考虑过使用轮询器来使用 API 返回的每个新对象来更新文件列表。但是，轮询器不是这里的问题，我首先需要一个函数来将 new 模型添加到文件列表中。

API 根据此模型返回 JSON 列表：

Xff = Backbone.Model.extend({
        defaults: {
                id: null,
                name: "",
                language: "en",
                timestamp: 0,
                status: null,
                progress: 10,
                duration: 0
        }
});

这是收藏。 restUri 指向 REST API，并通过 /files 获取完整的文件列表。

XffCollection = Backbone.Collection.extend({
        model: Xff,
        comparator: function(a, b) {
             return (a.get("timestamp") > b.get("timestamp") ? -1 : 1);
        },
        url: restUri + "files"
});

这是 AppView 对象。如上所述，它使用 XffCollection。

app = new AppView({
        collection: new XffCollection()
});

AppView 是一个常规的主干视图...

AppView = Backbone.View.extend({ .... })

使用 app.collection.fetch() 我可以触发请求（在 firebug 中可见），但列表没有更新。我还有一个 addAll() 函数，但它只是将新文件列表附加到旧文件列表中。

addAll：

addAll: function() {
  this.collection.chain().sort().each(this.addOne, this);
}

这是addOne：

addOne: function(xff) {
  var v = new XffView({model: xff});
  this.xffViews.push(v);
  $("#xffs").append(v.render().el);
}

如何将新条目添加到列表中？

更新

虽然 kindasimples anwser 现在可以工作，但前端的文件列表不再使用集合中定义的比较器（带有时间戳）进行排序。使用比较器底部的 addAll() 对列表进行排序。

为了提供更多信息，这里是整个主干代码的更多部分：http://pastebin.com/rR39x3Y1

来自backbone.js 文档：

collection.sort([选项]) 强制集合重新排序。在正常情况下您不需要调用它，因为带有比较器的集合会在添加模型时自行排序。要在添加模型时禁用排序，请将 {sort: false} 传递给添加。调用 sort 会触发集合上的“排序”事件。

但它不会自行排序。在 fetch 之后立即调用 app.collection.sort() 也无济于事。

更新 2

我通过在返回之前对 API 中的数组进行排序来修复它。 这不是它的本意，但至少它现在可以工作了。

Answer 1

你的想法是对的。 addOne() 将在您在获取填充项目后进行初始设置时呈现单个项目。您可以向集合事件添加侦听器以添加新项目。 Collection.Fetch 通过将新模型添加到集合中并保留旧模型来完成您想要的操作（只要您不将 {reset:true} 标志作为参数传递）

因此，在您的视图中将侦听器添加到初始化挂钩

initialize: function() {
    this.listenTo(this.collection, "add", this.addOne)
}

您可能希望在 Xff 模型上定义 idAttribute，以便骨干网可以正确识别新项目。