在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 等各个环节被点击。我看不出这将每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));
}

这将发布一个共同的 route_change 事件每hashchange并通过名称，片段和其他 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.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

编辑：示例程序的

sample program

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();

和，用上述路由器导航

router.navigate('home', true);

输出：家居路线

更新的为什么上面的程序不工作：

Update on why the above program is not working:

我们应该为所有绑定事件的 Router实例，但不是在路由器本身 - 因此，改变 Router.bind（所有，... 到 router.bind（'所有'，...）将使上述工作方案

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可以绑定所有事件Router实例和第一个参数传递到您的处理程序将被路由

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 ，在这里转载：

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屋！