ember.js - Ember - 在路线上绑定(bind)自定义操作

Question

是否可以向路由事件添加自定义操作(基本上是任何 JS 代码)？

有一个应用程序需要更改应用程序“外部”页面的某些部分。是的，页面的该部分应该位于应用程序中，但事实并非如此。因此，我需要在某些路由事件上稍微更改“外部”DOM。例如，当我处于索引状态时，某处有一个空元素，当我移动到另一个状态时，该元素将其内容更改为“后退”并变得事件。另外，我想将 ember 路由操作绑定(bind)到该元素上的 onClick 事件。

我试图找到这样的东西，但似乎什么也没有。我发现了这个，但它根本没有解决我的问题: How do I bind events directly to existing HTML, without using any kind of views, in Ember.js?

感谢您的宝贵时间。

Answer 1

知道有一个 enter 可能会有所帮助。您可以在路线内处理的事件:

other: Ember.Route.extend({
    route: '/other',
    connectOutlets: function(router, context) { /* ...? */ }),
    enter: function(router) {
        // ...
    }
})

不确定是否有更适合您需求的解决方案。

更新:如果您使用action helper，点击事件将根据您的需要触发操作。示例 - 在模板中:<a {{action gotoOtherState href="true"}}>Go to other state</a> ，以及您所在的路线(或祖先...在本例中为索引路线): gotoOtherState: Ember.Route.transitionTo('path.to.otherState') .

href=true是 <a> 的可选触摸标签。您还可以定义自己的转换:

gotoOtherState: function(router, event) {
    // Setup? Teardown?
    // ...
    router.transitionTo('path.to.otherState');
}

注意:如果您在操作助手中传递上下文(例如 {{action gotoOtherState this}} )，您可以通过事件访问它: router.transitionTo('path.to.otherState', event.context);

更新 2: enter是一个私有(private)钩子(Hook)，而 activate是一个新的公共(public) Hook (请参阅 http://emberjs.com/blog/2013/02/15/ember-1-0-rc/ )