Backbone.js中的嵌套获取

Question

我有两个API端点：

/products(具有与其相关联的Product模型)和

/stockitems(对应于我的Backbone.js应用程序中的StockItems集合)。

为了呈现StockItems集合视图，我首先获取集合，然后为其中的每个模型获取Product(例如/products/1499)以获得一些附加信息。

我的第一次尝试如下。

var stock = new App.Collections.StockItems();
stock.fetch().success(function(){
for (var i in stock.models) {
var product = new App.Models.Product({id: stock.models[i].get('product_id')});
product.fetch().success(function(){
stock.models[i].set('img', product.get('image_url_1'));
});
}
});

然而，通过这种方式，只有stock.model的最后一个会使用附加属性进行更新。我有一种预感，如果我等着所有的东西都取出来，然后更新，它就会起作用。这是我第二次尝试。

var stock = new App.Collections.StockItems(), 
product = [],
count;
stock.fetch().success(function(){
count = stock.models.length;
for (var i in stock.models) {
product[i] = new App.Models.Product({id: stock.models[i].get('product_id')}); 
product[i].fetch().success(function(){
count--;
if (count === 0) {
for (i in stock.models) {
stock.models[i].set('img', product[i].get('image_url_1'));
}
} 
});
}
});

它现在可以工作了，但是我不确定我为什么需要那个计数器和额外的循环。我还觉得应该有更好的方法来做这件事。也许包括在Backbone视图中获取指令？

以下是我的模型/集合/视图定义。

window.App = {
Models: {},
Views: {},
Collections: {}
};
App.Models.Product = Backbone.Model.extend({
urlRoot: 'http://mysite/api/products'
});
App.Models.StockItem = Backbone.Model.extend({});
App.Collections.StockItems = Backbone.Collection.extend({
model: App.Models.StockItem,
url: 'http://mysite/api/stock'
});
App.Views.StockItem = Backbone.View.extend({
tagName: 'li',
template: _.template( $('#stockItemTemplate').html() ),
render: function() {
this.$el.html( this.template(this.model.toJSON()) );
return this;
}
});
App.Views.StockItems = Backbone.View.extend({
tagName: 'ul',
initialize: function() {
this.$el.empty();
},
render: function() {
this.$el.empty();
this.collection.each(this.addOne, this);
return this;
},
addOne: function(stock_item) {
var stock_item = new App.Views.StockItem({ model: stock_item });
this.$el.append( stock_item.render().el );
}
});

Answer 1

现在我明白了，在显示库存项目时，您希望显示产品图像，所以您要求库存项目中的每个模型在循环中获取图像。

这效率不高，伙计。想象一下你们会向服务器发送多少请求！

不要多次提取。一次性完成。嵌套的获取实际上是不必要的。

简单的解决方案

看起来你不需要同时查看产品。因此，最简单的解决方案只需从服务器提供JSON集合，每个模型中都有产品图像url。完成。

高级解决方案

我认为简单的解决方案就足够了。从服务器在模型中添加一个额外的图像url字段只需要很少的资源。所以，即使你有时间不需要图像，你也可以把图像数据保存在那里，不会造成任何伤害。

然而，如果您仍然想要更多的控制，您可以设置一个参数来要求服务器添加图像或不添加

// StockItemsCollection
url: function(){
return 'http://example.com/stock' + this.params;
};
params: ''

当你想要图像时，你可以在获取之前将&with_image=true添加到param，服务器可以用这个参数来响应是否传递图像。比较灵活。