Ember 异步计算属性返回未定义 [英] Ember async computed property returns undefined

问题描述

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

I am attempting to set a property to the value of a model's async, hasMany relationship. But I'm not able to return any value within the then function.

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/not at all.此外，使用 console.log 我始终能够看到代码正在执行.

My issue lies in an ObjectController for an Athlete where I am attempting to set the Time hasMany array as a property. Outside of the then callback function I am able to return values normally. However, within the then callback, all values return undefined/not at all. In addition, using console.log I am consistently able to see that the code is being executed.

方法如下:

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('[e-mail]'),

虽然上面的函数总是返回 undefined，但下面的函数(同一控制器的一部分)可以一致地工作，没有错误.

While the above function always returns undefined, the function below (a part of the same controller) works consistently without error.

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个小时，我已经不知道去哪里找问题了.我不明白这个问题是从哪里来的.其他人会不会碰巧知道这个问题可能来自哪里?

After looking at it for 6 hours, I no longer know where to look for the issue. I do not understand where this issue is coming from. Would someone else happen to know where that issue can arise from?

注意:我的问题类似于 Ember 中的 计算属性的问题基于异步数据，尽管我对该解决方案没有任何运气.

Note: My issue is similar to that of Computed property in Ember based on async data although I have not had any luck with that solution.

推荐答案

你没有向计算属性返回任何东西，而是向回调函数返回一些东西，回调函数被传递给任何链式承诺，但这仍然不会'返回承诺没有帮助，因为向计算属性返回承诺不会自动解析承诺并在计算属性的值处使用结果.

You aren't returning anything to the computed property, you are returning something to the callback function which is handed off to any chained promises, but that still wouldn't help had you returned the promise, since returning a promise to a computed property doesn't automatically resolve the promise and use the result at the value of the computed property.

您当前的计算属性基本上是这样做的:

Your current computed property is essentially doing this:

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('[e-mail]'),

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

In this situation it's easiest to use an observer and set the property (although it looks like you were accidentally watching time, instead of times)

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('[e-mail]'), //times, not time

这篇关于Ember 异步计算属性返回未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！