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

Question

I am trying to generate multiple views using one collection and one fetch every 5 seconds.

Below is a working example, but both views are refreshed when fetched. I could splice the response into multiple urls, but i want to minimize the aumount of requests.

My current problem is that i dont want all views to re-render every 5 seconds when the collection is re-fetched, only the associated view that changed. I have tried creating multiple models inside the collection and adding the correct object in the parse function without any luck.

Response:

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

// Client

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")});

**Update

To clarify: "only the associated view that changed". By this i mean that 'ViewOne' should only be re-rendered when 'json-1' has changed, and 'ViewTwo' shouldn't re-render. currently the full response is sent to both views.

Answer 1

When dealing with an API which returns an Object, not an array of Objects, the best approach is to use a Backbone.Model directly.

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

The model is still fetched the same way as the collection, but the Views can listen to specific attributes on the model, instead of:

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

The following can be used:

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

Tip: Better to listenTo rather than bind, it is safer (see docs )

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