Ember.js in Component send Action with data to another Component

Question

Component action triggers perfectly.

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
      searchField: function() {
        console.log('searchField');
        this.sendAction('searchField');
      }
    }
});

Route does not get triggered.

import Ember from 'ember';

export default Ember.Route.extend({
    actions: {
      searchField: function() {
        console.log('ROUTE');
      }
    }
});

Handlebars

{{input key-up='searchField' searchField=(action "searchField")}}

I have spent so much time with this I am starting to lose interest with Ember.js, as I have also tried according to the documentation, but I get the same result. http://emberjs.com/api/classes/Ember.Component.html#method_sendAction

Answer 1

sendAction will not reach to route. You have two options,

1. define searchField function in controller and from there you can route functionthis.send('searchField')

2. To directly call from component to route, there is addon ember-route-action-helper for this.

ember install ember-route-action-helper

Refer answer for more info. To play around - Sample Twiddle