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

Question

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

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

所以，我已经在我的路由器子类/对象中覆盖了Backbone.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_change 事件，并传递 name、fragment 和其他 args，我使用它们在一个地方突出显示状态。

我的问题是我是否必须像这样重写 Backbone 方法，或者我可以在这里使用任何内置机制。如果没有，我希望在 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();

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

router.navigate('home', true);

输出：home route

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

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

Answer 1

这就是我正在做的事情：

@router.bind 'all', (route) ->
  # this triggers twice for every route; ignore the second time
  return if route == "route"

  # ex: route="route:home", name="home", href="#home"
  name = route.replace('route:', '')

  # remove the active class on all of the current nav links
  $("#menu li.active").removeClass('active')

  # add it back to the link that has an href that ends in `name`
  $("#menu a[href$='#{name}']").parent().addClass('active')

Answer 2

我遇到的问题是，第一次加载页面时，菜单没有突出显示，因为事件发生在绑定开始之前。 我通过使用历史记录解决了这个问题：

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

Answer 3

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

这里是exemple on 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);

Answer 4

这是我的一个应用程序中的一个实例：

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