Tutorial for Backbone.js Router Hashing And It's Basic Implementation

If you are working with a single page application, then you must adopt backbone.js features and this helps your web project to be more powerful. Backbone.js is basically a lightweight framework that allows you to structure your JavaScript code in Model View Controller. This post I had covered the basic implementation of router and URL hashing techniques.

Required Libraries

You should follow this script including format, otherwise, AppRouter does not work. underscore.js provides more functions to backbone.js

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="router.js"></script>

router.js

Backbone router is used for routing your web application URL's when using hash tags(#) Eg: www.example.com/#home

var AppRouter = Backbone.Router.extend({
routes: {
'': 'home',
'index.html': 'home',
':level': 'blockGrid', // Matches http://example.com/#six
'block/:level/:num': 'blockNum', // Matches http://example.com/#block/six/34
'*actions': 'defaultAction' // Matches http://example.com/#anything-here
},

home : function()
{
//Nothing doing
},

blockGrid : function(level){
grid(level); // Calling grid function 
},

blockNum : function(level,num){
gridNum(level,num); // Calling gridNum function
},

});

Note: Use uniquer names like blockGrid and grid.

JavaScript

Sample JavaScipt code for starting backbone library using Jquery document ready. grid and gridNum are simple functions for changing block styles.

<script type='text/javascript'>
$(document).ready(function()
{
var appRouter = new AppRouter(); // Router initialization 
Backbone.history.start(); // Backbone start
});
// Applying color for grid based on level.
function grid(level)
{
$("td").css("background-color","#f2f2f2");
$("#"+level).css("background-color","#80c8e5"); // Applying color
}
// Appending URL values into block
function gridNum(level,num)
{
grid(level); // Calling grid function 
$("#"+level).html(num); // Appending num value
}
</script>

HTML Code

Contains anchor tags with #hash hyperlinks related to router js structure.

//Link Set #:level
<a href="#one">One</a>
<a href="#two">Two</a>
<a href="#three">Three</a>
......
......
//Link Set #block/:level/:num

<a href="#block/one/1">One</a>
<a href="#block/two/2">Two</a>
<a href="#block/three/3">Three</a>
......
......

<table>
<tr>
<td id="one">1</td>
<td id="two">2</td>
</tr>
<tr>
<td id="three">3</td>
<td id="four">4</td>
</tr>
......
......
</table>