Navigation 突出显示Backbone.js应用程序中的当前导航状态

我想突出显示当前的导航状态。就像hashchange是

#home

，我想以不同的方式设置“home”菜单链接的样式，类似于其他链接

Backbone.js触发单个事件，如

路由：home

<代码>路由：单击

#home

和其他链接时，其他一些。我看不到每一次hashchange都会触发的任何常见事件。因此，我需要通过绑定到所有路由事件来编写状态高亮逻辑，我认为这不是一个好的解决方案

因此，我在我的路由器子类/对象中重写了

主干.Router.route

，如

// 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\u change

事件，并传递

名称

，

片段

，以及其他

参数

，我将使用这些参数在单个位置高亮显示状态

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

编辑：示例程序

使用上述路由器进行导航：

router.navigate('home', true);

输出：

回家路线

更新上述程序不起作用的原因：

---

我们应该为

Router实例上的
all
事件绑定，而不是在
Router
本身上绑定-因此，将
Router.bind（'all'，…
更改为
Router.bind（'all'，…）
将使上述程序工作
在主干网0.5.x中，您可以将
所有
事件绑定到路由器实例，传递给处理程序的第一个参数是route

这里是,这里转载:

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

var dummy=Backbone.Router.extend({
defaultPage:'消息'，
路线：{
“‘索引’，
“索引”：“索引”，
“邮箱”：“邮箱”
},
索引：函数（）{
//代码在这里
},
邮箱：函数（）{
//代码在这里
}
});
var router=newdummy（）；
router.bind（'all'，函数（路由）{
document.write（'triggered:'+route+'
'）；
});
router.navigate（'index'，true）；
路由器。导航（'mailbox'，true）；
下面是我的一个应用程序的一个实例：

routes.bind('all ', function(route, section) {
    var $el;
    route = route.replace('route: ', '');

    $el = $('#nav - ' + route);

    // If current route is highlighted, we're done.
    if ($el.hasClass('selected')) {
        return;
    } else {
        // Unhighlight active tab.
        $('#menu li.selected').removeClass('selected');
        // Highlight active page tab.
        $el.addClass('selected');
    }
});

我面临的问题是，第一次加载页面时，菜单没有突出显示，因为事件发生在绑定启动之前。
我通过使用历史记录修复了此问题：

$('#menu li.'+Backbone.history.fragment).addClass('active');

以下是我正在做的：

@router.bind'all'（路由）->
#这会对每个路由触发两次；忽略第二次
如果route==“route”，则返回
#例如：route=“route:home”，name=“home”，href=“#home”
name=route.replace（'route:'，''）
#删除所有当前导航链路上的活动类别
$（“#menu li.active”）.removeClass（'active'）
#将其添加回以`name'结尾的href链接`
$（“#菜单a[href$='#{name}']”）.parent（）.addClass（'active'））
在主干网0.5.x中，您可以将
all
事件绑定到路由器，传递给处理程序的第一个参数是route@ant_Ti-将其作为答案而不是评论发布，这样你就可以获得好评。@ant_Ti我不确定为什么我错过了你的评论。我试图将“全部”绑定到路由器，但它似乎不起作用。我没有h通过源代码，我也找不到触发任何“all”事件的路由器。我添加了简单的代码片段来演示这一点。你能添加一些代码吗（请回答）是的，当然！这里是谢谢。我没有想到我绑定的是
路由器
，而不是它的实例
路由器
。有了这个，我得到了路由更改事件，比如
路由：主页
，只对已知的路由（因为只会对它们进行触发）。有了我目前的小补丁，我可以处理未知链接（404）我也需要（但在OP中没有提到）。请添加您的注释/程序作为答案。我会接受。正如其他人的参考：绑定到“all”事件会导致处理程序函数接收路由更改事件，如route:home，但仅针对已知路由（因为只对它们进行触发）问题，这会在所有内容呈现后触发？旧问题，但有人在吗？我有一个查询…我成功地完成了上述部分，但它在我的所有导航中触发了2次…第一次给出正确的信息，第二次总是空白…有什么想法吗？？？我也有类似的高亮显示逻辑（也要突出显示主菜单和子菜单）。但是
所有
事件绑定的问题是它只接收已知路由。我想知道所有路由更改（简单地说，每个哈希更改）。这对于显示一些404错误非常有用。对于“404”路由检测，我将此添加为我的最后一个路由：
“*path”：“第404页错误”
老问题，但有人在吗？我有一个查询…我成功地完成了上述部分，但它在我的所有导航中触发了2次…第一次给出正确的信息，第二次总是空白…有什么想法吗？？？听起来你在其他地方也有触发它的代码。在上述代码中添加一个警报，如果警报触发两次，你知道吗这是原因，如果不是，其他地方也有代码。
$('#menu li.'+Backbone.history.fragment).addClass('active');