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.
ReplyDeleteHey! Interesting Article ;)
ReplyDeleteThats great i realy like this.
ReplyDeleteGreat post! Thanks for this!
ReplyDeleteHow, very nice tutorial!
ReplyDeleteI like Backbone.js!
Thx Srinivas ;)
basic stuff
ReplyDeleteAmazing tut, thank you :)
ReplyDeleteGreat simple intro..
ReplyDeletethats great, thanks man
ReplyDeleteThanks for the article.
ReplyDeleteSrinivas, if you mind please make another article about single page application like this. but more complicate :)
it's amazing ..
ReplyDeleteCreepy backbone logo! They should avoid this logo! Otherwise super tutorial dude. Cheers!
ReplyDeletegreat 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
ReplyDeleteIt is Awesome tutorial :)
ReplyDeleteThankx for introducing me to backbone.js good thing and thankx for such a helping tutorial
ReplyDeleteThankx for introducing me to backbone.js. Thankx for such a helping tutorial
ReplyDeleteI Was trying to figure out the code by viewing Source code of Egglabs...LoLzz
ReplyDeleteThanks for posting this wonderful article
Not work in google chrome 15.0
ReplyDeleteVery very good i study the script
ReplyDeleteThis is good...
ReplyDeleteAwesome.... nice script..
ReplyDeleteNice job!
ReplyDeleteWhat does the file mail.php look like?
Thank you.
nice code! simple is the best
ReplyDeleteBackbone.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.
ReplyDeleteGreat 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...
ReplyDeleteThanks!
helpful post!
ReplyDeletebest tutorial I've seen on using backbone router much appreciated
ReplyDeletenice article,good description
ReplyDeletenice :)
ReplyDeleteThank you,
ReplyDeleteThe information you shared is very informative.
Simple and knowledgeable explanation. Nice.
ReplyDeleteThanks
This is great information, thanks’ for share!
ReplyDeleteSuperb Article..Love Lesson 9
ReplyDeleteHi 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