ember.js - Ember : Router pre and post hooks connectOutlets

Question

我想在 Ember Router 中的每个 connectOutlets 调用之前和之后调用一些函数。我在 Ember 文档中找不到任何内容。

有什么建议吗？

Answer 1

来自“Understanding the Ember.js Router: A Primer ”指南:

Every Ember.Route fires an enter and exit callback. Here is a suitable place to insert logging and debugging data as has already appeared in this application.

Setting the enableLogging property to true within the Router also helpfully display's the Router's decision-making process. When the browser's debug console is open, the router will print helpful error messages beginning with STATEMANAGER.

您可以使用 enter 和 exit 回调，如下所示:

App.Router = Ember.Router.extend({
    enableLogging: true,
    root: Ember.Route.extend({

        gotoHome: Em.Route.transitionTo('root.home'),
        gotoInfo: Em.Route.transitionTo('root.info'),

        index: Ember.Route.extend({
            route: '/',
            redirectsTo: 'home'
        }),
        home: Ember.Route.extend({
            route: '/home',
            connectOutlets: function(router) {
              router.get('applicationController')
                    .connectOutlet("home");
            },
            enter: function(router){
                console.log('The "enter" event of "home" route has been fired');
            },
            exit: function(router) {
                console.log('The "exit" event of "home" route has been fired');
            }
        }),
        info: Ember.Route.extend({
            route: '/info',
            connectOutlets: function(router) {
              router.get('applicationController')
                    .connectOutlet("info");
            },
            enter: function(router){
                console.log('The "enter" event of "info" route has been fired');
            },
            exit: function(router) {
                console.log('The "exit" event of "info" route has been fired');
            }

        })
    })
});

检查this fiddle打开浏览器控制台，这样您就可以在进入/离开路线时看到日志。

编辑: 如果您只想根据路线更新当前选定的菜单，则不需要在连接 socket 之后或之前连接事件，您实际上需要“菜单 Controller ”具有一个跟踪所选菜单的属性项目，当您输入给定路线时，您会更新该 Controller 。您的“菜单 View ”将具有带有 classNameBindings 的子菜单项，该子菜单项基于 Controller 中的选择(您可以将其绑定(bind)到父 View )。 This fiddle已经实现了，所以我不会再写一个，但是检查一下并查看 NavigationController、NavigationView (和 NavigationItemView)&路线。在每个 connectOutlet 中，我正在更新 Controller 中选定的菜单项，如下所示:

router.set('navigationController.selected', '我的路线名称在此处');

希望这有帮助