Question

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

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的'完整'动作。

我已经设置了一个jsbin来演示我的问题：

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

根据EmberJs documentation on action bubbling：

如果控制器没有实现与其操作对象中的操作同名的方法，则该操作将被发送到路由器，其中当前活动的叶子路由将有机会处理该操作。

所以考虑到这一点，我希望组件说“让我们检查一下我的控制器，看看它是否有一个叫'完成'的动作。不是吗？好吧，让我们检查一下我的路线（IndexRoute），看它是否有动作称为'完整'。是吗？好的，触发它！“

我唯一能想到的是，由于组件的设置方式，IndexRoute未设置为组件的路径，因此动作冒泡只会停在控制器上。

我不确定从哪里开始。我是否需要做一些特别的事情才能使我的组件知道我的IndexRoute？

Answer 1

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

因此，从组件中你的动作需要让自己冒出来，这可以通过

来完成

this.sendAction('clickMyButton');

然后在使用组件时，将需要触发的路径操作分配给组件操作，如下所示

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

Answer 2

如果您在操作中没有执行任何其他操作，除了向路径发送操作外，您可以尝试直接从模板执行此操作：

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

（未经测试的代码，请确保先测试！）

......否则看起来你应该这样做：

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

而不是：

this.sendAction('complete');

所以看起来你刚刚错过了问题中发布的代码中的第一个参数。 Reference

从组件触发路由操作

2 个答案: