Route trigger action from component

Question

I have a component that I want to trigger a route level action so that I can switch to another 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'm trying to do is when the clickMyButton MyAreaComponent action fires, it invokes the full IndexRoute action.

I installed jsbin to demonstrate my problem:

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

According to EmberJs documentation on sparging actions :

If the controller does not implement the method with the same name as the action in its action object, the action will be sent to the router, where the current active route of the sheet will be given the opportunity to process the action.

So, with that in mind, I expect the component to say: “Let me check my controller and see if it has an action called“ complete. ”No? Well, let it check my route (IndexRoute) to see if he has an action called “complete.” Yes? Ok, run it! ”

The only thing I can think of is that, due to the way the component is configured, IndexRoute is not set as the component’s route, so the bubbling action simply stops on the controller.

I'm not sure where to go from here. Do I need to do something so that my component knows about my IndexRoute?

Answer 1

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

So, from the component that needs to be taken, you need to bubble, this can be done with

 this.sendAction('clickMyButton'); 

and then when you use your component, assign a route action that should be triggered by the action of your component, as shown below

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

Answer 2

If you do nothing in the action, except sending the action to the route, you can try to do this directly from the template:

 <button {{action "complete" target="route"}}>Complete</button> 

(Unused code, make sure you test first!)

... otherwise it looks like you should:

 this.sendAction('action', 'complete'); 

instead:

 this.sendAction('complete'); 

So it looks like you simply did not have the first parameter in the code posted in your question. Link