Call closure actions from component template

Question

I create an instance of the component and add some closing 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 got the impression that I would not need to determine the action for the component in this case in order to connect things. But for now, it looks like this:

/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 closing actions? It seems that posting the action in the component is similar to the same job as before (with regular actions).

Answer 1

I had exactly the same problem. Here, at least one way how closing actions can be used to avoid manually writing js code to redirect 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); } } }); 

Answer 2

Changed your code for you (I tested and it works):

/app/templates/template.hbs => No change

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

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

/app/controllers/my-controller.js => No change

/app/components/my-component.js

 export default Ember.Component.extend({ actions: { lookup() { this.attrs.submit(this.get('coolField')); } } }); 

In addition, the stated reason for connecting such actions (from the book Rock and Roll with Ember ):

“Closing actions are obviously an improvement over old-style actions. They are easier to reason and debug, because if the named action does not exist in the context of the template, we will get a clear error message ...”

“Another advantage of closing actions, which are only functions, is that they have a return value that we can use at the point where we process (call) the action. This can be used to see if there was an upstream the action is successful or go back further information, something that was not possible with bubbling actions. "