Backbone.js：仅添加来自 JSON 集合获取的新模型

Question

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

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

APIreturns一个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 是常规 backbone 视图...

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

使用 app.collection.fetch() 我可以触发请求（在 firebug 中可见），但列表未更新。我还有一个 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()，列表被排序。

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

来自 backbone.js 文档：

collection.sort([options]) Force a collection to re-sort itself. You don't need to call this under normal circumstances, as a collection with a comparator will sort itself whenever a model is added. To disable sorting when adding a model, pass {sort: false} to add. Calling sort triggers a "sort" event on the collection.

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

更新 2

我通过在返回它之前对 API 中的数组进行排序来修复它。那是不是它本来的样子，但至少它现在起作用了。

Answer 1

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

因此，在您看来，将侦听器添加到初始化挂钩

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

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

Backbone.js：仅添加来自 JSON 集合获取的新模型

Backbone.js: Adding just the new models from JSON collection fetch

javascript

rest

backbone.js