Question

在我的Ember应用程序中，我有一个父组件my-section.hbs定义如下;

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

现在在我的领域，我有

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

我的问题是如何在my-scale组件中访问onFieldChange？

Answer 1

我会通过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)}}

IMO比冒泡的常规动作容易一些;您可以将函数作为函数传递，并将其称为常规函数（或将其绑定到事件）

我整理了一个小演示，以便您可以在行动here中看到它。

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的内容并在路线上指定您的操作。

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

2 个答案: