Backbone.js Router Hashing Tutorial
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>

36 comments:

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

    Thx Srinivas ;)

    ReplyDelete
  2. Amazing tut, thank you :)

    ReplyDelete
  3. Thanks for the article.

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

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

    ReplyDelete
  5. 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

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

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

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

    Thanks for posting this wonderful article

    ReplyDelete
  9. Not work in google chrome 15.0

    ReplyDelete
  10. Very very good i study the script

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

    ReplyDelete
  12. 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.

    ReplyDelete
  13. 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!

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

    ReplyDelete
  15. nice article,good description

    ReplyDelete
  16. Thank you,
    The information you shared is very informative.

    ReplyDelete
  17. Simple and knowledgeable explanation. Nice.
    Thanks

    ReplyDelete
  18. This is great information, thanks’ for share!

    ReplyDelete
  19. Superb Article..Love Lesson 9

    ReplyDelete
  20. 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.

    ReplyDelete