Backbone.js 多视图，一个集合，一个获取

Question

我正在尝试使用一个集合生成多个视图，并且每 5 秒获取一个。

下面是一个工作示例，但两个视图在获取时都会刷新。 我可以将响应拼接成多个 url，但我想尽量减少请求的数量。

我当前的问题是，当重新获取集合时，我不希望所有视图每 5 秒重新渲染一次，只有关联的视图发生了变化。 我尝试在集合中创建多个模型并在解析函数中添加正确的对象，但没有任何运气。

回复：

{
  "json-1": {
    "sub_1": "3",
    "sub_2": [],
  },
  "json-2": {
    "sub_1": [],
    "sub_2": "1",
  },
}

// 客户端

const APICollection = Backbone.Collection.extend({
    initialize: (models, options) => {
        this.id = options.id;
    },
    url: () => {
        return 'https://url.url/' + this.id;
    },
    model: APIModel,
        parse: (resp) => {
        return resp;
    },
});

const ViewOne = Backbone.View.extend({
    initialize: function () {
        this.collection.bind('sync', this.render, this);
        this.update();
        _.bindAll(this, 'update');
    },
    render: function (n, collection) {
        // Render view
    },
    update: function () {
        let self = this;
        this.collection.fetch({
            update: true, remove: false, success: function () {
                setTimeout(self.update, 5000);
            }
        });
    }
});

// Also updates when re-fetched
const ViewTwo = Backbone.View.extend({
    initialize: function () {
        this.collection.bind('sync', this.render, this);
    },
    render: function (n, collection) {
        // Render function
    }
});

let col = APICollection([], {id: 'someid'});
new ViewOne({collection: col, el: $("#one")});
new ViewTwo({collection: col, el: $("#two")});

**更新

澄清：“只有关联的视图发生了变化”。我的意思是“ViewOne”应该只在“json-1”发生变化时重新渲染，而“ViewTwo”不应该重新渲染。目前完整的响应发送到两个视图。

Answer 1

在处理返回对象而不是对象数组的 API 时，最好的方法是直接使用 Backbone.Model。

update: function () {
    let self = this;
    this.model.fetch({
        update: true, remove: false, success: function () {
            setTimeout(self.update, 5000);
        }
    });
}

模型仍然以与集合相同的方式获取，但视图可以侦听模型上的特定属性，而不是：

this.collection.bind('sync', this.render, this);

可以使用以下内容：

this.model.bind('change:json-1', this.render, this);

提示：最好使用listenTo而不是绑定，这样更安全（见docs）

this.listenTo(this.model, 'change:json-1', this.render);