Highlight the current navigation status in the Backbone.js application

Question

I want to highlight the current state of navigation. For example, if hashchange #home , I want to change the Home menu link and other links differently.

Backbone.js fires individual events like route:home , ... route:some-other when you click #home and other links. I have not seen any general event that will be fired for each hash exchange. With this I have to write the logic of state allocation, binding to all the events of the route, which, I think, is not a good solution.

So, I redefined Backbone.Router.route in my class / router object, e.g.

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

This will post a generic route_change event for each hash exchange and pass name , fragment and other args , with which I isolate the state in one place.

My question is do I need to override the Backbone method, for example, or is there some kind of build mechanism that I can use here. If not, I would like to see similar behavior in Backbone.js

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

and using the router described above:

 router.navigate('home', true); 

output: home route

Update on why the above program does not work:

we must bind the all event to the Router instance , but not to the Router itself, so changing Router.bind('all', ... to router.bind('all', ...) will do the above program

Answer 1

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

Here is a jsfiddle example 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); 

Answer 2

Here is a live example from one of my applications:

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

Answer 3

That's what I'm doing:

 @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 4

I ran into a problem that the first time the page was loaded, the menu was not highlighted, since the event appeared before the start of the binding. I fixed this using history:

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