約束を解決してもテンプレートにデータが表示されない

Question

私はテンプレートを作成するためにいくつかのバージョンを試しましたが、RSVP.Promiseをパラメータとして返しています。

すべてのconsole.logには妥当な値が与えられているので、約束はであり、解決はです。 問題私は（という質問もあります）は、その解決値をテンプレートに戻す方法です。私のテンプレートで

// in controller.js 
testA: Ember.computed('sessionAccount.account.id', function() { 
    let _this = this; 
    let promise = new Ember.RSVP.Promise(function(resolve, reject) { 
     _this.get('store').findAll('accounts2workgroup').then(function(a2ws) { 
      let workgroups = []; 
      a2ws.forEach(function(a2w){ 
       if(a2w.get('rights')>1) { 
        workgroups.push(a2w.get('workgroup')); 
       } 
      }); 
      console.log(workgroups); 
      _this.set('wgAsAdmin', workgroups); // this works 
      resolve(Ember.A(workgroups)); //=> [Object] in rendered template 
      // return workgroups; // no, not that way 
     }); 
    }); 

    promise.then(function(data) { 
     console.log('did resolve'); 
     console.log(data); 
    }) 

    return promise; 
}).property('sessionAccount.account.id'), 

testB: Ember.computed('sessionAccount.account.id', function() { 
    return new Ember.RSVP.Promise(function(resolve, reject) { 
    let workgroups = Ember.ArrayProxy.create([{'label': 'TestB Label'}]); 
     resolve(workgroups); 

    }); 
}), 

testC: Ember.computed(function() { 
    return this.store.findAll('artists2workgroup').then(function(a2ws) { 
      let workgroups = []; 
      a2ws.forEach(function(a2w){ 
       if(a2w.get('rights')>1) { 
        workgroups.push(a2w.get('workgroup')); 
       } 
      }); 
      console.log(workgroups); 
      return workgroups; //=> [Object] in rendered 
    }); 
}), 

testD: Ember.computed(function() { 
    return this.store.findAll('workgroup'); // this of course works, but that's not what I want... 
}), 

私はすべての私のように同様のテストをテスト：

<h4>TestB</h4> 
{{#each testB as |wg|}} 
     {{wg}}<br> 
     {{wg.label}}<br> 
{{/each}} 
testB: {{testB}}<br> 
testB.length: {{testB.length}}<br> 

、すべての（しかし、明らかに、最後TESTD）を

にレンダリングここ

は、私が試したバージョンであります

TESTB
TESTB：[対象オブジェクト]
testB.length：ember1117 >
BB-推進
TESTB：< DS.PromiseObject私は期待/でしょうけれども

は彼らが

TESTB
< DS.PromiseObjectを表示したいです：ember1117 >
testB.length：1

私はそれを回避する方法があることを知っています（私はf.eを解決する際に別のプロパティを設定できます）が、正しい方法で行い、これを行う方法を学びたいと思います。 そして、私はこれらの例があまり意味をなさないと知っています。これは単なる基本的な機能ですが、これを実行すると機能が強化されます。

Answer 1

まずはexplicit promise construction antipatternを避けてください！また、矢印機能がember-cliにあるため、thisを保存する必要はありません。

testA: Ember.computed('sessionAccount.account.id', function() { 
    return this.get('store').findAll('accounts2workgroup').then(a2ws => { 
     return workgroups 
      .filter(a2w => a2w.get('rights') > 1) 
      .map(a2w => a2w.get('workgroup')) 
    }); 
}).property('sessionAccount.account.id'), 

さて、これはそれが動作することはありません。だからあなたのtestAを書き換えることができます。ここでの問題は、emberテンプレートが約束を意識していないことです。したがって、次の3つのオプションがあります。

1. これを行わないでください。多くの場合、modelフックを使用して非同期作業を行うことができます。
2. テンプレートのember-promise-helpersのようなものを使用してください。
3. Promiseを返すだけではありません。

1を実行できない場合は、3と一緒に行くことをおすすめします。これについては、PromiseProxyMixinを理解する必要があります。ember-dataでは、このミックスインのための2つの実装、findAll、findRecord、queryまたは非同期の関係がPromiseObject/PromiseArrayを返すようPromiseArrayとPromiseObject

すべてember-dataメソッドを持っています。だから両方ともpromiseとの正規オブジェクトです。 promise部分は経路modelフックで有用であり、Object/部分は計算された特性に役立ちます。だからあなたのために行くための最も簡単な方法は、二つにあなたのCPを分割することです：

allWorkgroups: Ember.computed(function() { 
    return this.get('store').findAll('accounts2workgroup'); 
}), 
testA: Ember.computed('sessionAccount.account.id', 'allWorkgroups.@each.rights', 'allWorkgroups.@each.workgroup', function() { 
    return this.get('allWorkgroups') 
     .filter(a2w => a2w.get('rights') > 1) 
     .map(a2w => a2w.get('workgroup')) 
}).property('sessionAccount.account.id'), 

これは動作しますが、最初のallWorkgroupsは空の配列/未解決の約束になりますが、約束の解決時にその配列が更新されるので、 、testA CPが再計算されます。

しかし、あなたも手動で新しいPromiseArrayを作成することができます。

testA: Ember.computed('sessionAccount.account.id', 'allWorkgroups.@each.rights', 'allWorkgroups.@each.workgroup', function() { 
    const promise = this.get('store').findAll('accounts2workgroup').then(a2ws => { 
     return workgroups 
      .filter(a2w => a2w.get('rights') > 1) 
      .map(a2w => a2w.get('workgroup')) 
    }); 

    return DS.PromiseArray.create({promise}); 
}).property('sessionAccount.account.id'), 

あなたは約束が失敗した場合、両方のケースでは、任意の情報を取得することはできませんことを、知っている必要がありますが！