Use an application's route's action in a template component

Question

Firstly, I'm fairly new to Ember, so the way things interact muddles me up easily.

I am working within an existing Ember application. In the app's routes/application.js.es6 there are actions defined. Given that these actions are in the application route, can I access them from anywhere?

I am specifically looking to use one of the application's route's actions in a template/component.

In the component's js file, do I need to inject or import something to use the action from the application route?

Daniel Kmak Daniel Kmak · Accepted Answer · 2016-06-03T20:32:04

This demo perfectly demonstrates the thing you try to achieve.

First, define action in application route:

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    myActionFromApp() {
        console.log('myAction from application fired');
    }
  }
});

Then in template pass name of action to component:

{{my-component myAction='myActionFromApp'}}

Then you can call your ApplicationRoute action from component:

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    myAction() {
        this.sendAction('myAction');
    }
  }
});

In demo I do it when someone clicks button:

<button {{action 'myAction'}}>Fire action myAction</button>

Result in console is:

myAction from application fired

When you click on button which is expected.

Use an application's route's action in a template component

1 Answers