{{Quest 3}}: How to call an action on a route using closure actions?

Level: Intermediate

Supposing you have an action on your route (say: routes/users.js) and you would like to invoke it from a component rendered on the routes/users.hbs template, how do you do it? There are couple of ways to solve this problem.

1. Use the traditional action=”action” for the component like below:
{{my-component editUser="editUser"}}

And in your my-component.js file, you would be doing this.editUser() which will fire the action on the controller which you will use to send it up to the route.

However, if you are using the new closure syntax as below:

{{my-component editUser=(action "editUser")}}

In this case, Ember complains that there’s no action editUser defined on the controller.

So here come’s the second approach.

2. Bubbling it up with ‘send’ in closure action

{{my-component editUser=(action send 'editUser')}} should do the trick while you have editUser action defined in the parent route. Thanks to Ed for posting this as an answer on StackOverflow.

Here’s the ember twiddle for that https://ember-twiddle.com/4cc4035c86b2418b3e0abc6e6ae15a43

This was originally posted on StackOverflow at https://stackoverflow.com/a/40043476

To know more about Ember’s send() vs sendAction(), you may want to refer this post:

Ember send() and sendAction()

PS: Clap if you liked, and don’t forget to follow me here: Abhilash L R or on Twitter @abhilashlr