Ember 异步计算属性返回未定义

Question

我正在尝试将属性设置为模型的 async、hasMany 关系的值。但我无法在 then 函数中返回任何值。

App.Athlete = DS.Model.extend({
    name: DS.attr('string'),
    age: DS.attr('number'),
    splits: DS.hasMany('split', {async: true}),
    times: DS.hasMany('time', {async: true}),
});

App.Time = DS.Model.extend({
    athlete: DS.belongsTo('athlete', {async:true}),
    race: DS.belongsTo('race', {async: true}),
    time: DS.attr('string'),
});

App.Split = DS.Model.extend({
    distance: DS.attr('string'),
    time: DS.attr('string'),
    athlete: DS.belongsTo('athlete', {async:true}),
    race: DS.belongsTo('race', {async: true}),
});

我的问题在于 Athlete 的 ObjectController，我试图将 Time hasMany 数组设置为属性。在then 回调函数之外，我能够正常返回值。但是，在then 回调中，所有值都不会返回undefined/。此外，使用console.log，我始终能够看到代码正在执行。

这是那个方法：

time: function() {
    var raceid= '1';
    this.get('times').then(function(times) {  // returns undefined in this scope
        console.log(times.get('length'));     // consistently displays
        times.forEach(function(time) {
            time.get('race').then(function(timerace) {
                if(timerace.get('id')===raceid) {
                    console.log('match');     // consistently diplays
                    console.log(time.get('time')); // consistently displays
                    return time.get('time'); // returns undefined/not at all
                }
            });
        });
    });
}.property('time.@each.time'),

虽然上面的函数总是返回undefined，但下面的函数（同一个控制器的一部分）可以始终如一地工作而不会出错。

sortedSplits: function(){
    var self = this,
    raceid = '1',
    splits = this.get('splits');
    // filter each split by race
    this.get('splits').filter(function(split) {
        // retrieve race split belongsTo
        split.get('race').then(function(race) {
            // compare race
            return race.get('id') === thisrace; 
        });
    });
    splits = splits.sortBy('m');
    return splits;                // returns correctly
}.property('splits.@each.m'),

看了 6 个小时，我已经不知道该去哪里找问题了。我不明白这个问题是从哪里来的。其他人会碰巧知道这个问题可能出自哪里吗？

注意：我的问题与Computed property in Ember based on async data 的问题类似，尽管我对那个解决方案没有任何运气。

Answer 1

你没有向计算属性返回任何东西，你正在向回调函数返回一些东西，该函数被传递给任何链式承诺，但是如果你返回承诺，这仍然无济于事，因为返回一个承诺给计算属性不会自动解析承诺并在计算属性的值处使用结果。

您当前的计算属性实际上是这样做的：

time: function() {
    var raceid= '1';
    this.get('times').then(function(times) {  // returns undefined in this scope
        console.log(times.get('length'));     // consistently displays
        times.forEach(function(time) {
            time.get('race').then(function(timerace) {
                if(timerace.get('id')===raceid) {
                    console.log('match');     // consistently diplays
                    console.log(time.get('time')); // consistently displays
                    return time.get('time'); // returns undefined/not at all
                }
            });
        });
    });
  // I'm not returning anything so
  return undefined;
}.property('time.@each.time'),

在这种情况下，最简单的方法是使用观察者并设置属性（尽管看起来您不小心看的是时间，而不是时间）

time: null,
timWatcher: function() {
    var raceid= '1',
        self = this;
    this.get('times').then(function(times) {  // returns undefined in this scope
        console.log(times.get('length'));     // consistently displays
        times.forEach(function(time) {
            time.get('race').then(function(timerace) {
                if(timerace.get('id')===raceid) {
                    console.log('match');     // consistently diplays
                    console.log(time.get('time')); // consistently displays
                    self.set('time', time.get('time')); // set property to time value
                }
            });
        });
    });
}.observes('times.@each.time'), //times, not time