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 basic implementation of router and URL hashing techniques.
Download Script 
Live Demo Egglabs PageNote: Try live demo and use browser Back and Forward controls.
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>
<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
},
});
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>
$(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 hyper links 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>
<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>
amazing work :D.
Hey! Interesting Article ;)
Thats great i realy like this.
Great post! Thanks for this!
How, very nice tutorial!
I like Backbone.js!
Thx Srinivas ;)
basic stuff
Amazing tut, thank you :)
Great simple intro..
thanks
thats great, thanks man
Thanks for the article.
Srinivas, if you mind please make another article about single page application like this. but more complicate :)
it's amazing ..
Creepy backbone logo! They should avoid this logo! Otherwise super tutorial dude. Cheers!
great article srini! can you please tell me where would we apply this technique? i mean when is backbone.js applicable to what type of projects? tnx
It is Awesome tutorial :)
Thankx for introducing me to backbone.js good thing and thankx for such a helping tutorial
Thankx for introducing me to backbone.js. Thankx for such a helping tutorial
I Was trying to figure out the code by viewing Source code of Egglabs...LoLzz
Thanks for posting this wonderful article
Not work in google chrome 15.0
Very very good i study the script
This is good...
Awesome.... nice script..
Nice job!
What does the file mail.php look like?
Thank you.
nice code! simple is the best
Backbone.js features and this allows your web project to be more amazing. Backbone.js is usually a compact framework that allows you to framework your JavaScript value in Style Perspective Proprietor.
Great Tutorial, copy paste your code from it and it actually works, was looking a while, many don't, now how do I move this HTML into a backbone view... and call some models via AJAX...
Thanks!
helpful post!
best tutorial I've seen on using backbone router much appreciated
I want to confirm that, your post is so interesting. It contains a lot of important and useful information. I got a lot of great things. Thank you so much!
bop nam
nice article,good description
nice :)
Thank you,
The information you shared is very informative.