从组件触发路由动作 [英] Trigger route action from component

问题描述

我有一个组件，我想触发路线级别的操作，所以我可以转换到不同的路线。

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

我想要完成的是当MyAreaComponent的clickMyButton操作被触发时，它将触发IndexRoute的完​​成操作。

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

我有设置一个jsbin来演示我的问题：

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.

所以考虑到这一点，我会期望组件说让我们检查我的控制器，看看它是否有一个动作完成。没有？好的，让我们检查我的路由（IndexRoute），看看它是否有一个叫做完成的动作。是？好吧，触发它！

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!"

我可以想到的唯一的事情是，由于组件的设置方式，IndexRoute不被设置为组件，所以操作起泡刚刚停在控制器。

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.

我不确定从哪里走，我需要做一些特别的事情来使我的组件知道我的IndexRoute？

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

推荐答案

这是您更新的示例 -
http://emberjs.jsbin.com/wivuyike/3/edit

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

这篇关于从组件触发路由动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！