Javascript Backbone.js中的嵌套抓取

我有两个API端点：

/products

（带有与其关联的

产品

型号），以及

/stockitems

（对应于mybackbone.js应用程序中的

stockitems

集合）

要呈现

StockItems

集合视图，我首先获取集合，然后为其中的每个模型获取

产品（例如
/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'));
        }
      } 
    });
  }
});

它现在可以工作了，但是我不知道我为什么需要那个计数器和额外的循环。我也觉得应该有更好的方法。可能在主干视图中包含获取指令

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

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

现在我了解到，您希望在显示库存项目时显示产品图像，因此您要求库存项目中的每个模型在循环中获取图像

这是没有效率的，伙计。想象一下，您将向服务器发送多少请求

不要取多次。马上做。嵌套抓取实际上是不必要的

简单的解决方案
看起来您不需要同时使用产品视图。因此，最简单的解决方案就是从服务器交付JSON集合，每个模型中都有产品图像url。完成了

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

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

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

params: ''

当您需要图像时，您可以在获取之前将
&with_image=true
添加到
param
，服务器可以使用此参数响应是否交付图像。相当灵活