Trigger route action from component

Question

I have a component that I want to trigger a route level action on so I can transition to a different route.

App = Ember.Application.create();

App.Router.map(function() {
});

App.IndexRoute = Ember.Route.extend({
  actions: {
    complete: function() {
      // This never happens :(
      console.log('Triggered complete!');
    }
  }
});

App.MyAreaComponent = Ember.Component.extend({
  actions: {
    clickMyButton: function() {
      console.log('Triggering complete action.');
      // Attempting to trigger App.IndexRoute.actions.complete here
      this.sendAction('complete');
    }
  }
});

What I am trying to accomplish is when MyAreaComponent's 'clickMyButton' action is triggered, it will trigger the IndexRoute's 'complete' action.

I have set up a jsbin to demonstrate my issue:

http://emberjs.jsbin.com/wivuyike/1/edit

According to the EmberJs documentation on action bubbling:

If the controller does not implement a method with the same name as the action in its actions object, the action will be sent to the router, where the currently active leaf route will be given a chance to handle the action.

So with this in mind I would expect the component to say "Let's check my controller and see if it has an action called 'complete'. No? Ok, let's check my route (IndexRoute) to see if it has an action called 'complete'. Yes? Ok, trigger it!"

The only thing I can think of is that because of the way the component is set up, IndexRoute isn't set as the route of the component, so the action bubbling just stops at the controller.

I'm unsure where to go from here. Do I need to do something special to make my component aware of my IndexRoute?

Answer 1

Here is your updated sample - http://emberjs.jsbin.com/wivuyike/3/edit

So from the component your action need to bubble herself up, this can be done by

this.sendAction('clickMyButton');

and then when you use your component, assign route action which needs to be triggered to your component action as below

{{my-area clickMyButton='complete'}}