Invoking closure actions from a component's template

Question

I'm instantiating a component and attaching some closure actions (new in 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…
    }
  }
});

I was under the impression that I wouldn't need to define an action on the component in this case to wire things up. But so far it looks like this is required:

/app/components/my-component.js

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

Am I completely confused about how to use closure actions? It seems like wiring the action up in the component like this is just as much work as before (with regular actions).

Answer 1

I had exactly the same issue. Here's at least one way how closure actions can be used to avoid manually writing js code to forward actions.

/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);
    }
  }
});