javascript - Ember Controller 属性、 promise 和范围

Question

对于 Javascript 来说非常新，甚至对于 Ember 来说也比较新，我有一个异步 hasMany 关联，并且我正在尝试对父模型 Controller 中的子模型(锦标赛)的属性进行求和。我对函数作用域的理解是，内部函数将可以访问包含函数中的所有内容(除了这个)，到目前为止这都很好。我试图在 promise 解决时添加金额，但它必须创建一个新的金额变量，因为一旦我将其返回到外部 forEach，它就会返回到 0，而且我不确定我要去哪里错误的。我知道我没有在 .property() 中设置依赖项，我只是想先解决这个问题。

totalPrice: function(){
    var self = this;
    var allTourn = this.get('model.tournaments');
    var amount = 0;

    allTourn.forEach(function(tournament){
        var tID = Number(tournament.get('id'));

        self.store.find('tournament', tID).then(function(value){
            amount += Number(value.get('buyIn'));
            //amount is set to the buyIn property as expected
        })

        // amount is 0 out here... shouldnt the amount in the promise be using the outter amount variable?
    });

    return amount; // == 0
}.property()

基于托尼回答的解决方案我将其移至路线并在 View 中解决了 promise 路线/package.js

export default Ember.Route.extend({
  model: function(params) {
    return this.store.find('package', params.package_id);
  },

  setupController: function(controller, model){
    var allTourn = model.get('tournaments');
    var self = this;

    var totalPricePromise = new Ember.RSVP.Promise(function(resolve, reject) {
      var tournyPromises = allTourn.map( function(tournament){
    var tID = Number(tournament.get('id'));
    return self.store.find('tournament', tID)
      });

      Ember.RSVP.all(tournyPromises).then(function(tournamentList){
    var amount = 0;
    tournamentList.forEach(function(tournament){
      amount += Number(tournament.get('buyIn'));
    })

    resolve(amount);
    controller.set('totalPrice', amount);
      });
    });
    controller.set('package', model);
  }

});

Answer 1

就像 Eggward 在评论中所说的那样，totalPrice 会返回金额，而无需等待 store.find() promise 。这些 promise 会排队等待稍后运行，即在 TotalPrice 完成后的某个时间。

因此，如果您必须等待 Promise 进行计算，那么您可以从 TotalPrice 返回一个 Promise，并在所有 store.find() 调用完成时解决它。您可以使用 Ember Promise 的 all() 方法对查找结果进行分组。例如，您可以尝试这样的方法，而不是 allTourn.forEach:

// create a promise to return from totalPrice()
var totalPricePromise =  new Ember.RSVP.Promise(function(resolve, reject) {

  // create an array of promises from the find() calls.
  var tournyPromises = allTourn.map( function(tournament){
  var tID = Number(tournament.get('id'));
  return self.store.find('tournament', tID)
});

// user RSVP.all to wait for all the finds to complete
// it automatically groups all the results into an array
Ember.RSVP.all(tournyPromises).then(function(tournamentList){
  var amount = 0;
  tournamentList.forEach(tournament){
     amount += Number(tournament.get('buyIn'));
  })

  // this resolve is from the Ember.RSVP.Promise at the top
  // it will finally get to whoever called totalPrice()
  resolve(amount);
});

// return the promise from totalPrice, instead of the amount
return totalPricePromise;
});

但是，如果以下情况， promise 可能无法很好地作为属性(property):您需要它作为 Handlebars 助手。作为替代方案，您可以将所有 promise 的内容移至您设置模型的路线，以便在 Controller 中您已经拥有所有锦标赛。那么您就不必等待totalPrice函数中的find()操作。