获取foreach循环内的骨干模型

时间:2015-10-20 18:09:37

标签: javascript backbone.js promise

    this.shipperModel = new shipperModel();
    this.collection = new packetListCollection(this.options.packetData);
    this.listenTo(this.collection, "change", this.render);
    this.listenTo(this.collection, "add", this.render);
    this.finalArry = [];
    self.collection.each(function (modelData) {
        self.shipperModel.fetch({
            data: {
                facility_id: modelData.facility_id ? modelData.facility_id : 0
            }
        }).then(function (response) {
            console.log(response.records);
            self.finalArry.push(response.records);
        })

    });
    console.log(self.finalArry);

我的数组总是空白,即使响应中有数据,我如何确保仅在完成上述所有提取后才显示结果。

2 个答案:

答案 0 :(得分:3)

这是因为您将数组记录在then()关闭之外。

this.finalArry = [];
self.collection.each(function (modelData) {
  self.model.fetch({
    data: {
      facility_id: modelData.facility_id ? modelData.facility_id : 0
    }
  })
  .then(function (response) {
    console.log(response.records);
    self.finalArry.push(response.records);
    console.log(self.finalArry);
  });
});

fetch()是一种异步方法,因此您的原始console.log()会在任何网络调用成功之前触发。

Oscar Linde的答案值得注意 - 这可能不是你想要进行初始数据保湿的方式。

答案 1 :(得分:2)

完全重新获取整个集合而不是重新获取每个模型不是更好吗?

无论如何,回到原来的问题,你要找的是javascript承诺。我认为如果我要在评论中解释它可能会有点混乱。也许你可以看看https://api.jquery.com/category/deferred-object/或只是google javascript promises,我相信你会找到一些东西。

也许这就是你要找的(未经测试):

var requests = [],
  self = this;
this.finalArry = [];

self.collection.each(function (modelData) {
  // Push all requests wrapped in a function into an array
  requests.push(function () {
    return self.model.fetch({
      data: {
        facility_id: modelData.facility_id ? modelData.facility_id : 0
      }
    }).then(function (response) {
      console.log(response.records);
      self.finalArry.push(response.records);
    });
  });
});

// Run all requests and map the return value(a promise)
requests = _.map(requests, function (req) {
  return req();
});

// When all requests are done, log
$.when.apply($, requests).then(function (response) {
    console.log(self.finalArry);
});

至少我不建议使用async: false,这会导致糟糕的用户体验。