Emberルートモデルの一部のみを約束する方法は？

Question

私はこのような単純なtemplate.hbsあります

// template.hbs 

<p>{{model.x}}</p> 
<p>{{model.y}}</p> 

次route.jsは期待通りに動作します：

// route.js 

import Route from '@ember/routing/route'; 

export default Route.extend({ 

    model() { 

     return { 
      x: 'foo', 
      y: 'bar' 
     }; 

    } 
}); 

// output, immediately: 
// foo 
// bar 

以下は、今もモデル全体のための約束を使用して、作品

：

を

// route.js 

import Route from '@ember/routing/route'; 
import RSVP from 'rsvp'; 

export default Route.extend({ 

    model() { 

     return new RSVP.Promise((resolve) => { 
      setTimeout(() => { 
       resolve({ 
        x: 'foo', 
        y: 'bar' 
       }); 
      }, 1000); 
     }); 

    } 
}); 

// output, after 1s: 
// foo 
// bar 

私はただmodel.xを約束したいと思っていますが、以下は動作しません。

// route.js 

import Route from '@ember/routing/route'; 
import RSVP from 'rsvp'; 

export default Route.extend({ 

    model() { 

     return { 
      x: new RSVP.Promise((resolve) => { 
       setTimeout(() => { 
        resolve('foo'); 
       }, 1000); 
      }), 
      y: 'bar' 
     }; 

    } 
}); 

// output, IMMEDIATELY: 
// [object Object] 
// bar 

それはすぐに出力をレンダリングするが、それはsetTimeoutにコールバックに入った後、それはmodel.xのためにレンダリングされた値を変更しません。

私はRSVP.hash()を認識していますが、約束が拒否された場合は拒否されます。ルートモデルのさまざまな部分に対して独立した約束をすることは可能ですか、それともすべてかどうかだけですか？

奇妙なことに、問題の約束がember-dataによって返されるとします。 x: this.get('store').findRecord('user')の場合、動作するはずです（template.hbsを<p>{{model.x.name}}</p>と変更）。最後のケースでは

Answer 1

あなたは燃えさしデータからPromiseObjectまたはPromiseArrayを使用することができます。このため

export default Ember.Route.extend({ 
    model() { 
     return { 
      x: DS.PromiseObject.create({ 
       promise: new RSVP.Promise((resolve) => { 
        setTimeout(() => { 
         resolve({name: 'foo'}); 
        }, 5000); 
       }) 
      }), 
      y: 'bar' 
     }; 
    } 
}); 

を仕事に、あなたの約束結果はオブジェクト（すなわちfooではなく{name: 'foo'}）でなければなりません。テンプレート内にx.nameを使用できます。これは、約束が返るまで未定義に戻ります。

Answer 2

、

model.xあなたはHBSで{{log model.x}}をすれば、あなたはコンソールでそれを見ることができ、プロミスオブジェクトです。 {{model.x._result}}を使用して値にアクセスできます。これは正しい方法ではありません。

あなたのケースでは、ルートのsetupControllerフックを実装しようとすることができ、

setupController(controller,model) 
    { 
    this._super(...arguments); 
    let xPromise = new RSVP.Promise((resolve) => { 
       setTimeout(() => { 
        resolve('foo'); 
       }, 1000); 
      }); 
    xPromise.then((result) =>{ 
     this.set('model.x',result); 
    }); 

    }