Emberはあるコンポーネントから別のコンポーネントにアクションを送信します

Question

Emberアプリケーションでは、以下のように定義された親コンポーネントmy-section.hbsがあります。

{{#my-scale}} 
{{my-field}} 
{{/my-scale}} 

が今私のフィールドでは、私は

{{my-textfield label=fldName key-up="onFieldChange"}} 

を持っている私の質問は、私は私のスケールのコンポーネントでonFieldChangeへのアクセスを得るのですかですか？

Answer 1

バブルアップしたい各レイヤーでsendAction()を使用する必要があります。したがって、この場合は、myTextfieldからmyFieldからmyScaleに2回バブルする必要があります。

// templates/my-section.hbs 
    {{#my-scale}} 
    {{my-field}} 
    {{/my-scale}} 

// component/myTextfield.js 
export default Ember.Component.extend({ 
    actions: { 
    onFieldChange() { 
     this.sendAction('onFieldChange'); 
    } 
    } 
}); 

// component/myField.js 
export default Ember.Component.extend({ 
    actions: { 
    onFieldChange() { 
     this.sendAction('onFieldChange'); 
    } 
    } 

// component/myScale.js 
export default Ember.Component.extend({ 
    actions: { 
    onFieldChange() { 
     // do something 
    } 
    } 
}); 

また、ember-route-action-helperのようなものを使用して、ルート上であなたの行動を指定することを検討してください。

Answer 2

私はmy-scaleがmy-fieldが呼び出すアクションを提供することによってこの問題にアプローチします。あなたはkey-up

// my-field.hbs 
{{yield (action 'some-action-to-invoke-on-key-up')}} 

に呼び出してから、渡すためにアクションを得ることができる）my-fieldがどこにあるかのようなmy-scaleは（そのブロックに変数を提供することができます（「ブロック」コンポーネントのでClosure Action

を介してこれを行うことができますあなたがkey-upイベントにバインドできるフィールド

{{#my-scale as |someAction|}} 
    {{my-field action=(action someAction)}} 
{{/my-scale}} 

にそれ

{{my-textfield label=fldName key-up=(action someAction)}} 

これは通常の動作をバブリングするよりも簡単です。その関数を代わりに関数として渡して、それを普通の関数のように呼び出す（またはイベントにバインドする）ことができます。

少しデモをまとめて、hereのように表示できます。