9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Monday, November 26, 2012

Backbone.js Router Hashing Tutorial

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.

Free PHP Hosting .


Download Script
     Live Demo     Egglabs Page

Note: 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>

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 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>
Comments
{ 36 comments }
ගයාන් තාරක said...

amazing work :D.

Sandeep Verma said...

Hey! Interesting Article ;)

Huzoor Bux Panhwar said...

Thats great i realy like this.

Aleks Bella said...

Great post! Thanks for this!

Alexander said...

How, very nice tutorial!
I like Backbone.js!

Thx Srinivas ;)

Anonymous said...

basic stuff

Anonymous said...

Amazing tut, thank you :)

Ba La said...

Great simple intro..

choowit boondao said...

thanks

Dito Argiatama said...

thats great, thanks man

Ary Wibowo said...

Thanks for the article.

Srinivas, if you mind please make another article about single page application like this. but more complicate :)

keshav kshirsagar said...

it's amazing ..

Tuugii said...

Creepy backbone logo! They should avoid this logo! Otherwise super tutorial dude. Cheers!

Sree said...

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

Rahul Kashyap said...

It is Awesome tutorial :)

Sadaf Chohan said...

Thankx for introducing me to backbone.js good thing and thankx for such a helping tutorial

Sadaf Chohan said...

Thankx for introducing me to backbone.js. Thankx for such a helping tutorial

Rajeev Mahura said...

I Was trying to figure out the code by viewing Source code of Egglabs...LoLzz

Thanks for posting this wonderful article

Anonymous said...

Not work in google chrome 15.0

Tullio said...

Very very good i study the script

Balaji said...

This is good...

Rohit Suthar said...

Awesome.... nice script..

Dope said...

Nice job!
What does the file mail.php look like?
Thank you.

Elvis Sonatha said...

nice code! simple is the best

Mohammad Sheppard said...

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.

Anonymous said...

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!

Anonymous said...

helpful post!

Jaimie said...

best tutorial I've seen on using backbone router much appreciated

Anonymous said...

nice article,good description

Anonymous said...

nice :)

Belkin SEO said...

Thank you,
The information you shared is very informative.

Nimmi Thomas said...

Simple and knowledgeable explanation. Nice.
Thanks

Ashwin Preetham Lobo said...

Nice one.

avtech said...

This is great information, thanks’ for share!

Anonymous said...

Superb Article..Love Lesson 9

Charles said...

Hi Thanks for your tutorial. I have a doubt why do we need to use Routers? Cant we simply use hash tags and do what we want to do? Just curious about this, please help.

Post a Comment