Multiple Pages with Backbone.js and Bootstrap

Backbone.js has routes. Hooray, now ‘#here’ can go here, ‘#there’ can go there, and so on! That’s the logic side sorted out.
What about presentation?

In many cases, 1 route <=> 1 ‘page’ of content.

How do we do that?

The Bootstrap library has a tabs component that implements a couple of very useful things:

  • Provides a link between a menu and a set of ‘pages’
  • Easy to trigger page changes

We still need to add two small things to connect any router to a set of pages:

  • When a route is triggered, activate a matching tab.
  • When a tab is activated, trigger any matching route.

All it needs is the following code:

//On click, show the page, allow to route.
$('#tab_demo_menu a').on('click', function (e) { 
//On route, trigger the 'click'
Backbone.history.on('route', function(router, event) { 
	$('#tab_demo_menu a[href="#'+this.fragment+'"]').click();

So what does this mean?

  • No modification needs to be made to the router.
  • As long as a tab with that route name exists, it will automatically be shown when the route is invoked.
  • A route with no corresponding tab can be invoked with no ill effects; maybe you want to show a dialog above whatever page is active?
  • You can link to a particular tab with the #fragment; something that Bootstrap tabs don’t support by default.

Look! A finely crafted demo: