Ember call action in application route with return value

Question

In Ember you can call an action in your current context as you would a normal function, using this.actions.actionName(). This means the action can return a value.

In my login route, I am trying to call an action from the application route in this way. However this.actions only contains the actions in my login route.

Login Route

actions: {
  test: function() {
    console.log(this.actions.sameRouteAction()); //5
    console.log(this.actions.applicationRouteAction()); // this.actions.applicationRouteAction() is not a function.
  },
  
  sameRouteAction: function() {
    return 5;
  }
}

Application Route

actions: {
  applicationRouteAction: function() {
    return 7;
  }
}

What would this.actions.applicationRouteAction() have to become in order for this to work?

pzuraq pzuraq · Accepted Answer · 2018-05-14T16:27:39

As of Ember 3.1.0, there isn't a way you can call the action directly on the parent route as a normal function like you can in the context of the current route/class. You can use the send function to send an action upward:

actions: {
  test: function() {
    this.send('applicationRouteAction');
  },
}

But you won't be able to get the return value of the applicationRouteAction function this way.

The two best options for communicating the result of the action from the parent route to the child route are:

Updating the model for the parent route via transitionTo or refresh. This will update the route tree, and your child route can get the model of its parent via modelFor. Since you are using the Application route in your example, this seems like it's probably not the method you'll want to use.
Create or use an existing Service to communicate between the routes. You can inject the service in both locations, update its state from the Application route, and read its state from the child route.

If you can add more details about what you want the actions to do I can update this answer with more details about which pattern makes more sense and why!

Ember call action in application route with return value

1 Answers