Ember unable to pass route action to component

Question

I have a component that need to receive an action that I placed on the route since its job is to refresh part of the model.

Apparently I can call the route action from a button but I am not able to pass the same action down to the component.

The router

export default Ember.Route.extend({
    actions: {
        doSomething: function(){
            alert('Router handled!');
        }
    }
});

The page template

<button {{action "doSomething"}}>speak</button>
{{myComponent onGetUsers=(action "doSomething")}}

The component

export default Ember.Component.extend({
    actions: {
        onPageClicked: function(pageNo){
            this.sendAction('onGetUsers', pageNo);
        }
    }
});

The button click works. When I use the component I make it to its action but the sendAction never work or fires.

Is there a rule that I cannot pass actions to down line components? or am I doing something wrong in the code?

I was able to fire the router by using an action on the controller by using this.send() rather then this.sendAction() but I still would like to know why sending the router action down to the component does not work. If possible. — hal9000

Ember Freak Ember Freak · Accepted Answer · 2016-09-23T06:18:08

sendActions - can be used for component to Component communication.
send - can be used for controller to route communication. You can't use either way.

For Component to route communication, you can use below addon.

ember install ember-route-action-helper

By defining action in route, you can call it from template.hbs

<button {{action (route-action 'appRouteAction' 'fromApplication.hbs') }}>button</button>

and You can call from my-component.hbs

<button {{action (route-action 'appRouteAction' 'from MyComponent.hbs') }}>My-Component button</button>

and If you would like to call Component action first and then action in route,

In template.hbs - include Component with route-action as closure action,

{{my-component2 appRouteAction=(route-action 'appRouteAction')}}

In my-compoent2.hbs,

<button {{action 'appRouteAction' 'CallFromComponentActions-my-compoent2.hbs' }}>CallFromComponentActions</button>

In my-compoent2.js

import Ember from 'ember';
export default Ember.Component.extend({
  actions:{
    appRouteAction(fromWhere){
      console.log('appRouteAction in my-component ');
      this.get('appRouteAction')(...arguments);
    }
  }
});

Sample Twiddle- to play around ember-route-action-helper-addon.

Ember unable to pass route action to component

2 Answers