"親"から "子"のコンポーネントに通信するEmberの方法は何ですか？

Question

これは、データダウンアクションのアイデアに反していますが、それに続いて、親コンポーネントには人口が非常に多いようです。

私は別の方法があるかどうか探しています。

例のケース： "filters"、 "table"、 "options"を持つ親コンポーネントがあります。ユーザがオプションから別のテーブルを選択すると、フィルタをリセットする必要があります。 したがって、親コンポーネントからリセットフィルタをトリガする必要があります。

Answer 1

子コンポーネントに親コンポーネントプロパティをバインドすることができます。また、コンポーネントフックを通じて、オブザーバなしで親コンポーネントプロパティの変更に対応することができます。 これは、データダウンアクションアップ（DDAU）の原則と回避されたオブザーバーを遵守します。以下の例では

Ember-twiddle

、 親コンポーネントに変更selectedOptionId、その後、子コンポーネントで（私のテーブルは）順番に次のフックを呼び出して再レンダリングが開始されますたび（didUpdateAttrs、didReceiveAttrs、willUpdate、willRender 、didUpdate,didRender）。あなたはnewAttrsとoldAttrsプロパティからoptions引数をdidUpdateAttrsとdidReceiveAttrsフックから得るでしょう。

最初のレンダリングでは、didReceiveAttrsフックにoptions.oldAttrsはありません。

テンプレート/

{{parent-component }} 
{{outlet}} 

テンプレート/コンポーネント/親-component.hbs

{{my-table selectedOptionId=selectedOptionId}} 
<button {{action 'changeOption'}}> Change Option </button> 
{{yield}} 

**コンポーネント/親-component.js

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    selectedOptionId:1, 
    actions:{ 
    changeOption(){ 
     this.set('selectedOptionId',2); 
    } 
    } 
}); 

をapplication.hbs

テンプレート/コンポーネント/私の-table.hbs

{{selectedOptionId}} 
{{yield}} 

コンポーネント/私の-table.js

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    didReceiveAttrs(options){ 
    this._super(...arguments);  
    //this will run both initial render and rerender. 
    //For initial rendering alone options.oldAttrs will not be available 
    }, 
    didUpdateAttrs(options){ 
    this._super(...arguments); 
    //this will run only for the rerender 
    if(options.oldAttrs.selectedOptionId.value !== options.newAttrs.selectedOptionId.value) { 
     this.send('triggerOptionChangeEvent'); 
    } 
    }, 
    actions:{  
    triggerOptionChangeEvent(){ 
     console.log('triggerOptionChangeEvent ',this.get('selectedOptionId')); 
    } 
    } 
}); 

---

更新：ember guidesから 、

注記：Observerは新しいEmber開発者によって頻繁に使用されます。オブザーバーはEmberフレームワーク自体の中で頻繁に使用されますが、Emberアプリケーション開発者が直面するほとんどの問題では、計算されたプロパティーが適切なソリューションです。

したがって、常にオブザーバを使用しないようにしてください。ライフサイクルのフックメソッドでもoptionsを使用すべきではありません。それはdeprecatedです。手動で特定のプロパティが変更されているかどうかを確認する必要があります。それは正しい方法です。this RFC for more detailsを参照してください。それには、opionsプロパティをdidReceiveAttrsから避けるための正しいアプローチが含まれています。

stefan penner excellant talkを参照して、オブザーバを使用せずに問題を解決してください。