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

Question

我正尝试使用一个集合和一个每5秒获取一次来生成多个视图。

下面是一个工作示例，但两个视图都在刷新时刷新。 我可以将响应拼接到多个网址，但我想最大限度地减少请求的数量。

我目前的问题是，我不希望所有的视图重新渲染时，每集合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);