灰燼將動作從一個組件發送到另一組件

Question

在我的Ember應用程序中，我有一個父組件my-section.hbs定義如下；

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

現在在我的領域

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

我的問題是我如何在我的電子秤組件中訪問onFieldChange？

Answer 1

我將通過讓my-scale提供my-field將調用的動作來解決這個問題。 您可以通過關閉操作來執行此操作

由於“塊”組件（如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)}}

這比起常規行動要容易得多。 您可以改為將該函數作為一個函數傳遞，並像常規函數一樣調用它（或將其綁定到事件）

我整理了一個小樣，以便您可以在此處看到它的實際效果。

Answer 2

您需要在要冒泡的每個圖層上使用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之類的東西，並指定對路由的操作。