Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Invoking closure actions from a component's template

Tags:

ember.js

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).

like image 607
adamesque Avatar asked Jul 13 '15 21:07

adamesque


1 Answers

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);
    }
  }
});
like image 88
ronkot Avatar answered Oct 11 '22 15:10

ronkot