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。

// 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將調用的動作來解決這個問題。您可以通過Closure Action

做，因爲「塊」組件（如my-scale可以到其塊提供變量（其中my-field是）你能得到行動上key-up

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

呼叫，然後通過它進入該領域

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

，然後您可以綁定到key-up事件

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

這是國際海事組織比鼓泡常規行動更容易;你可以將函數作爲一個函數傳遞，而只是將它稱爲常規函數（或將其綁定到事件）

我放在一起一個小演示，以便您可以在行動中看到它here。