灰烬将动作从一个组件发送到另一组件

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之类的东西，并指定对路由的操作。