Backbone js 根据多个 URL 返回的结果构建集合
Backbone js building a collection from the results returned from multiple URL's
我有一个看起来像这样的模型:
var BasicModel = Backbone.Model.extend({
defaults: {
a: '',
b: '',
c: '',
d: '',
e: ''
},
idAttribute: "f",
parse: function (data) {
return data;
},
initialize: function () {
console.log('Intialized');
},
constructor: function (attributes, options) {
Backbone.Model.apply(this, arguments);
}
});
像这样的合集:
var BasicCollection = Backbone.Collection.extend({
model: BasicModel,
url: urlCode
});
var ACollection = BasicCollection.extend({
parse: function (data) {
return data.a.b.c.d;
}
});
var aCollection = new ACollection ();
和这样的观点:
var BasicView = Backbone.View.extend({
tagName: 'tr',
template: _.template($('#basic-status-template').html()),
render: function () {
this.$el.html(this.template(this.model.attributes));
return this;
}
});
var BasicsView = Backbone.View.extend({
initialize: function () {
this.render();
},
});
这是集合提取的样子(构建视图):
aCollection.fetch({
success: function () {
// View
var aView = BasicsView.extend({
el: '#foobar #table-body',
render: function () {
this.$el.html('');
aCollection.each(function (model) {
var x = new BasicView({
model: model
});
this.$el.append(x.render().el);
}.bind(this));
return this;
}
});
var app = new aView();
}
});
但现在我在尝试向视图将填充的表中添加另一部分细节时遇到问题。其中一列将需要来自单独 url 的数据。但我仍然希望它成为同一过程的一部分。
有没有办法从两个 URL 的结果中形成一个集合。 (即 a、b、d 和 e 来自 URL 1,c 来自 URL 2)?
这样我只需要更改模板,它应该都可以正常工作。而不是必须改变一大堆其他东西。
谢谢。
你有几个选择:
更新端点以发送所需数据。这是正确的做法。理想情况下,集合应具有单个端点
在获取集合之前发送一个单独的 AJAX 请求从一个 URL 获取数据,然后在集合的 parse
方法中将数据添加到从中获取的响应合集的 URL
做类似的事情:
$.when(collection.fetch(), collection.fetchExtraData())
.done(()=> { /* create view here */ });
fetchExtraData
这是一个自定义函数,它发送额外的请求并使用数据正确更新集合。这样两个请求是同时发送的。您需要确保 parse
不会重置来自其他端点的数据。
我有一个看起来像这样的模型:
var BasicModel = Backbone.Model.extend({
defaults: {
a: '',
b: '',
c: '',
d: '',
e: ''
},
idAttribute: "f",
parse: function (data) {
return data;
},
initialize: function () {
console.log('Intialized');
},
constructor: function (attributes, options) {
Backbone.Model.apply(this, arguments);
}
});
像这样的合集:
var BasicCollection = Backbone.Collection.extend({
model: BasicModel,
url: urlCode
});
var ACollection = BasicCollection.extend({
parse: function (data) {
return data.a.b.c.d;
}
});
var aCollection = new ACollection ();
和这样的观点:
var BasicView = Backbone.View.extend({
tagName: 'tr',
template: _.template($('#basic-status-template').html()),
render: function () {
this.$el.html(this.template(this.model.attributes));
return this;
}
});
var BasicsView = Backbone.View.extend({
initialize: function () {
this.render();
},
});
这是集合提取的样子(构建视图):
aCollection.fetch({
success: function () {
// View
var aView = BasicsView.extend({
el: '#foobar #table-body',
render: function () {
this.$el.html('');
aCollection.each(function (model) {
var x = new BasicView({
model: model
});
this.$el.append(x.render().el);
}.bind(this));
return this;
}
});
var app = new aView();
}
});
但现在我在尝试向视图将填充的表中添加另一部分细节时遇到问题。其中一列将需要来自单独 url 的数据。但我仍然希望它成为同一过程的一部分。
有没有办法从两个 URL 的结果中形成一个集合。 (即 a、b、d 和 e 来自 URL 1,c 来自 URL 2)?
这样我只需要更改模板,它应该都可以正常工作。而不是必须改变一大堆其他东西。
谢谢。
你有几个选择:
更新端点以发送所需数据。这是正确的做法。理想情况下,集合应具有单个端点
在获取集合之前发送一个单独的 AJAX 请求从一个 URL 获取数据,然后在集合的
parse
方法中将数据添加到从中获取的响应合集的 URL做类似的事情:
$.when(collection.fetch(), collection.fetchExtraData()) .done(()=> { /* create view here */ });
fetchExtraData
这是一个自定义函数,它发送额外的请求并使用数据正确更新集合。这样两个请求是同时发送的。您需要确保parse
不会重置来自其他端点的数据。