在 Backbone.js 应用程序中突出显示当前导航状态 [英] Highlighting current navigation state in Backbone.js application

问题描述

我想突出显示当前的导航状态.就像 hashchange 是 #home 一样，我想以不同的方式设置主页"菜单链接的样式，并且与其他链接类似.

I want to highlight the current navigation state. Like if the hashchange is #home, I want to style the 'Home' menu link differently and similarly other links.

Backbone.js 在 #home 和其他链接时触发单个事件，例如 route:home,... route:some-other被点击.我看不到任何会为每个 hashchange 触发的常见事件.有了这个，我需要通过绑定到所有路由事件来编写状态高亮逻辑，我认为这不是一个好的解决方案.

Backbone.js fires individual events like route:home,... route:some-other when the #home and other links are clicked. I could not see any common event that will be fired for every hashchange. With this I m required to write the state highlight logic by binding to all the route events, which I think is not good solution.

所以，我已经在我的路由器子类/对象中覆盖了 Backbone.Router.route，比如

So, I've overridden Backbone.Router.route in my router sub class/object, like

// override backbone' Router.route method to publish 
// common 'route_change' event for any hash change
route : function(route, name, callback) {
    Backbone.history || (Backbone.history = new Backbone.History);
    if (!_.isRegExp(route)) route = this._routeToRegExp(route);
    Backbone.history.route(route, _.bind(function(fragment) {
        var args = this._extractParameters(route, fragment);
        callback.apply(this, args);
        this.trigger.apply(this, ['route:' + name].concat(args));

        // ADDED BY: ManiKanta G
        // name: route method
        // fragment: route path
        // args: any additional args
        this.trigger.apply(this, ['route_change'].concat(name, fragment, args));
    }, this));
}

这将为每个 hashchange 发布一个公共 route_change 事件并传递 name、fragment 和其他 args 使用它我在一个地方突出显示状态.

This will publish a common route_change event for every hashchange and passing the name, fragment, and other args using which I m highlighting the state all in a single place.

我的问题是我是否必须像这样重写 Backbone 方法，或者我可以在这里使用任何内置机制.如果没有，我希望在 Backbone.js 中看到类似的行为

My question is do I have to override the Backbone method like this or is there any build in mechanism I can use here. If not, I would like to see similar behaviour in Backbone.js

示例程序

Router = Backbone.Router.extend({
    routes : {
        '': 'root', 
        'home': 'home',
        'about':'about'
    },

    // app routing methods
    root: function () { console.log('root route');  },
    home: function () { console.log('home route');  },
    about: function () { console.log('about route'); }

});

Router.bind('all', function () {
    console.log('all route...');
});

router = new Router();

并且，使用上述路由器进行导航:

and, navigating using the above router:

router.navigate('home', true);

输出:回家路线

更新为什么上述程序无法运行:

Update on why the above program is not working:

我们应该在 Router 实例 上绑定 all 事件，而不是在 Router 本身上 - 因此，更改 Router.bind('all', ... to router.bind('all', ...) 将使上述程序工作

we should bind for all event on Router instance, but not on the Router itself - so, changing the Router.bind('all', ... to router.bind('all', ...) will make the above program work

推荐答案

在骨干网 0.5.x 中，您可以将 all 事件绑定到路由器实例，传递给您的处理程序的第一个参数将是路由

In backbone 0.5.x you can bind all event to router instance and the first argument pass to your handler will be route

这里是 jsfiddle 上的示例，转载在这里:

Here is exemple on jsfiddle, reproduced here:

var dummy = Backbone.Router.extend({
    defaultPage: 'messages',

    routes: {
        '': 'index',
        'index': 'index',
        'mailbox': 'mailbox'
    },

    index: function() {
        // code here
    },

    mailbox: function() {
        // code here
    }
});

var router = new dummy();

router.bind('all', function(route) {
    document.write('triggered: ' + route + '<br/>');
});

router.navigate('index', true);
router.navigate('mailbox', true);

这篇关于在 Backbone.js 应用程序中突出显示当前导航状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！