@abhilashlr Navigate to home page

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

2 min read • 4th June 2018
Image of action used in movies

Stackoverflow question here: 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.

Link to this section1. 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.

Link to this section2. 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()

Enjoyed this article? Tweet it

I guess you might be looking to add your comments? Glad to tell you that this section is under construction. But don't hold on to your thoughts! DM them to me on Twitter