从组件的模板调用闭包动作

Question

我正在实例化一个组件并附加一些闭包动作(Ember v1.13中的新内容):

/app/templates/template.hbs

{{my-component key=val lookup=(action 'doLookup')}}

/app/templates/components/my-component.hbs

{{input value=coolField}}
<button {{action 'lookup' coolField}}>Look it up!</button>

/app/controllers/my-controller.js

export default Ember.Controller.extend({
  actions: {
    doLookup(field) {
      // do some work…
    }
  }
});

我的印象是,在这种情况下,我不需要在组件上定义一个动作来连接.但到目前为止看起来这是必需的:

/app/components/my-component.js

export default Ember.Component.extend({
  actions: {
    lookup(field) {
      this.attrs.lookup(field);
    }
  }
});

我对如何使用闭包动作感到困惑吗？似乎在组件中连接动作就像以前一样(使用常规操作).

Answer 1

我有完全相同的问题.这里至少有一种方法可以使用闭包动作来避免手动编写js代码来转发动作.

/app/templates/template.hbs

{{my-component key=val lookup=(action 'doLookup')}}

/app/templates/components/my-component.hbs

{{input value=coolField}}
<button {{action (action 'lookup' coolField)}}>Look it up!</button>

/app/controllers/my-controller.js

export default Ember.Controller.extend({
  actions: {
    doLookup(field) {
      console.log('Looking up with cool field value', field);
    }
  }
});