ember.js 从组件触发路由操作

rnmwe5a2  于 2022-12-12  发布在  其他
关注(0)|答案(3)|浏览(166)

我有一个组件,我想触发一个路由级别的操作,这样我就可以转换到一个不同的路由。

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的“complete”操作。
我已经设置了一个jsbin来演示我问题:
http://emberjs.jsbin.com/wivuyike/1/edit
根据EmberJs关于操作冒泡的文档:
如果控制器没有实现与其动作对象中的动作同名的方法,则该动作将被发送到路由器,其中当前活动的叶路由将被给予处理该动作的机会。
因此,考虑到这一点,我希望组件会说“让我们检查我的控制器,看看它是否有一个名为'complete'的操作。没有?好吧,让我们检查我的路由(IndexRoute),看看它是否有一个名为'complete'的操作。是吗?好吧,触发它!”
我能想到的唯一一件事是,由于组件的设置方式,IndexRoute没有设置为组件的路由,因此动作冒泡只是在控制器处停止。
我不确定下一步该做什么。是否需要执行一些特殊操作以使组件识别IndexRoute?

weylhg0b

weylhg0b1#

以下是更新后的示例-http://emberjs.jsbin.com/wivuyike/3/edit
所以从你的动作需要的分量把自己泡起来,这可以通过

this.sendAction('clickMyButton');

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

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

sqxo8psd2#

在路由旁边的模板中:

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

那么在组件中,您可以将其称为:

this.get('refresh')();

通过在组件中创建另一个操作,可以从组件模板调用操作。
所以今天它节省了我的时间。

mnowg1ta

mnowg1ta3#

如果您在操作中除了将操作发送到路由之外没有执行任何其他操作,则可以尝试直接从模板执行此操作:

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

(未测试的代码,请确保先进行测试!)
...否则看起来您应该:

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

而不是:

this.sendAction('complete');

因此,看起来你只是在你的问题中发布的代码中缺少第一个参数。参考

相关问题