Backbone.js 多个视图,一个 collection,一个提取
Backbone.js multiple views, one collection, one fetch
我正在尝试使用一个 collection 和每 5 秒一次提取生成多个视图。
下面是一个工作示例,但两个视图在获取时都会刷新。
我可以将响应拼接成多个网址,但我想尽量减少请求量。
我目前的问题是,当 collection 为 re-fetched 时,我不希望所有视图每 5 秒变为 re-render,只有关联的视图发生变化。
我尝试在 collection 中创建多个模型并在解析函数中添加正确的 object 但没有任何运气。
回复:
{
"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")});
**更新
澄清一下:"only the associated view that changed"。我的意思是说 'ViewOne' 应该只在 'json-1' 改变时被 re-render 编辑,而 'ViewTwo' 不应该 re-render。目前,完整的回复已发送到两个视图。
当处理 API 时 returns 一个对象,而不是一个对象数组,最好的方法是直接使用 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);
我正在尝试使用一个 collection 和每 5 秒一次提取生成多个视图。
下面是一个工作示例,但两个视图在获取时都会刷新。 我可以将响应拼接成多个网址,但我想尽量减少请求量。
我目前的问题是,当 collection 为 re-fetched 时,我不希望所有视图每 5 秒变为 re-render,只有关联的视图发生变化。 我尝试在 collection 中创建多个模型并在解析函数中添加正确的 object 但没有任何运气。
回复:
{
"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")});
**更新
澄清一下:"only the associated view that changed"。我的意思是说 'ViewOne' 应该只在 'json-1' 改变时被 re-render 编辑,而 'ViewTwo' 不应该 re-render。目前,完整的回复已发送到两个视图。
当处理 API 时 returns 一个对象,而不是一个对象数组,最好的方法是直接使用 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);