ember.js Ember Dataのしくみを理解するのに役立つ

Question

ember.jsの新機能です。

複数のモデル（複数のJSON/RESTful呼び出しを使用）を使用してサーバーからデータを取得するために、以下のコードを変更する必要があります。

この（単一のモデルバージョンは）WORKS：

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model() { 
    return this.get('store').queryRecord('wallet', {balance: true}); 
    } 
}); 

とで財布-balance.hbs：

<div>Your Total Score: {{wallet.balance}} </div> 

APP /ルート/ index.jsで

これに変更しました：

import Ember from 'ember'; 
import RSVP from 'rsvp'; 

export default Ember.Route.extend({ 
    model() { 
    return RSVP.hash({ 
     wallet: this.get('store').queryRecord('wallet', {balance: true}) 
    }); 
    } 
}); 

と財布-balance.hbs中：

<div>Your Total Score: {{wallet.wallet.balance}} </div> 

しかし、私は、次の（ "財布" - > "anythingelse"）に変更した場合、それは動作しません。

import Ember from 'ember'; 
import RSVP from 'rsvp'; 

export default Ember.Route.extend({ 
    model() { 
    return RSVP.hash({ 
     anythingelse: this.get('store').queryRecord('wallet', {balance: true}) 
    }); 
    } 
}); 

と財布-balance.hbs中：

<div>Your Total Score: {{anythingelse.wallet.balance}} </div> 

私は理由を理解しようとしています。それはどこで定義されている "財布"から拾い上げるのですか？そして "何か"への変更はうまくいかないのですか？ 「ウォレット」のコードはどこにありますか？

Answer 1

コンポーネントは周囲から分離されているため、コンポーネントに必要なデータはすべて渡されなければなりません。したがって、how to pass properties to componentを理解する必要があります。

上記の3つの例では、このようなコンポーネントをwallet-balanceと指定しています。 {{wallet-balance wallet=model}}

サード例えば{{anythingelse.wallet.balance}}この1つの作業をしたい場合は、あなたは{{log 'model object' model}}このように、log helperを利用することができ、テンプレートHBSファイルにデバッグするための{{wallet-balance wallet=model.anythingelse}}

のようなコンポーネントを含める必要がコンソールにmodelオブジェクトを印刷します。ここで

が画面の背後にある理由である、モデルのフックから返されるものは何でも

はsetupControllerフックメソッドを使用して、デフォルトで対応するコントローラのmodelプロパティに設定されます。 あなたのケースでは、setupControllerをオーバーライドしていないので、デフォルトの動作が適用されます。

return this.get('store').queryRecord('wallet', {balance: true});

• queryRecordはPromiseを返し、それが単一のレコードwalletに解決され、それは、コントローラのmodelプロパティに設定されます。今度はmodelは単一のwalletレコードオブジェクトに相当します。あなたがテンプレートにアクセスすることができ、 `{{model.balance}}

return RSVP.hash({ anythingelse: this.get('store').queryRecord('wallet', {balance: true}) });

queryRecordPromiseを返し、それが単一のレコードwalletに解決され、それが内部に設定されますオブジェクト{anythingelse:walletRecord}は現在{anythingelse:walletRecord}に相当します。あなたはテンプレートのように{{model.anythingelse.balance}}

Answer 2

setupController()にモデルを設定する必要があります。

import Ember from 'ember'; 
import RSVP from 'rsvp'; 

export default Ember.Route.extend({ 
    model() { 
    return this.get('store').queryRecord('wallet', {balance: true}); 
    }, 

    setupController(controller, wallet) { 
    controller.set('wallet', wallet); 
    } 

}); 

これが役に立ちます。