从组件触发路由动作

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'}}

Answer 2

in the template next to the route:

{{component-name refresh=(route-action "refresh")}}

then in component you can call it:

this.get('refresh')();

An action can be called from a component template by creating another action in the component.

So it saves me time today.

Answer 3

If you are doing nothing else in the action, except for sending an action to the route, you can try doing this directly from the template:

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

(Untested code, make sure you test first!)

... otherwise it looks like you should do:

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

instead of:

this.sendAction('complete');

So it looks like you were just missing that first parameter in the code posted in your question. Reference