我有一个基于Backbone.js的Web应用程序，带有一个列表。列表的条目来自REST API。此列表（JSON数组）会不时更新。我也想在前端更新列表，而无需重新加载页面。
我考虑过要使用轮询器通过API返回的每个新对象来更新文件列表。但是，轮询器不是这里的问题，我首先需要一个函数，仅将新模型添加到文件列表中。
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
从ribs.js文档中：
collection.sort（[options]）强制集合重新排序。通常情况下，您无需调用此函数，因为只要添加模型，带有比较器的集合便会对其进行排序。要在添加模型时禁用排序，请传递{sort：false}以添加。调用sort会触发集合上的“ sort”事件。
但是它本身不会排序。在获取后立即调用app.collection.sort（）也无济于事。
更新2
我通过在返回之前对API中的数组进行排序来修复它。那不是应该的样子，但至少现在可以了。
你有正确的主意。在获取填充项后进行初始设置时，addOne（）将呈现单个项。您可以将侦听器添加到收集事件中以添加新项目。Collection.Fetch通过向集合中添加新模型并保持原有模型不变（只要您不将{reset：true}标志作为参数传递）来完成您想要的操作
因此，在您的视图上，将侦听器添加到Initialize钩子中
initialize: function() {
this.listenTo(this.collection, "add", this.addOne)
}
您可能需要在Model上定义idAttribute，Xff以便主干网可以正确识别新项目。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句