主干.js:仅添加来自 JSON 集合获取的新模型

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

本文关键字：新模型 获取 模型 集合 JSON js 添加 主干      更新时间：2023-09-26

我有一个基于Backbone的webapp.js有一个列表。列表的条目来自 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"
});

这是应用程序视图对象。它使用 XffCollection，如上所述。

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

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

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

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

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

更新

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

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

从骨干.js文档：

collection.sort（[options]） 强制集合重新排序。在正常情况下，您不需要调用它，因为每当添加模型时，带有比较器的集合都会自行排序。要在添加模型时禁用排序，请将 {sort： false} 传递给 add。调用排序会在集合上触发"排序"事件。

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

更新 2

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

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

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

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

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

相关文章：