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

我有一个基于Backbone.js的webapp，上面有一个列表。列表的条目来自RESTAPI。此列表（JSON数组）会不时更新。我也想在前端更新我的列表，而不需要重新加载页面

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

API返回基于此模型的JSON列表：

Xff=Backbone.Model.extend({
默认值：{
id:null，
姓名：“，
语言：“恩”，
时间戳：0，
状态：空，
进展：10，
持续时间：0
}
});

这是收藏。restUri指向restapi，并使用/files获得完整的文件列表

XffCollection=Backbone.Collection.extend({
型号：Xff，
比较器：功能（a、b）{
返回（a.get（“timestamp”）>b.get（“timestamp”）？-1:1）；
},
url:restUri+“文件”
});

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

app=新建AppView({
集合：新的XffCollection（）
});

AppView是一个常规主干视图。。。

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

addAll：

这是addOne：

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

更新

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

为了提供更多信息，下面是整个主干代码的更多部分：

从backbone.js文档：

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

但它并没有自行排序。在提取之后立即调用app.collection.sort（）也没有帮助

更新2

---

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

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

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

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

---

您可能希望在

Xff

模型上定义idAttribute，以便主干能够正确识别新项目。

这实际上是可行的，但我在最初获取集合后使用了addAll（）。添加listenTo后，它会添加两次所有模型。为了解决这个问题，我删除了视图中initialize（）底部的addAll，现在模型只显示一次。但是，不再使用集合的比较器对模型进行排序，新获得的模型将附加到列表的末尾。我怎样才能解决这个问题？collection.sort（）无法正常工作。每次调用addOne时，它都会将项添加到节点中id=xffs的最后一个位置，因此即使对集合进行了排序，新项也会出现在列表的底部。在循环并呈现所有元素之前，应该在addAll（）中放置一行以清除列表中的

$（“#xffs”）.empty（）

。假设集合已正确排序，要保持dom列表元素的排序，可以开始将元素插入其正确位置（而不是使用.append（））或调用addAll（）来保持排序，方法是清除列表并按顺序添加项。

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

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

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