Introduction

This article explains the router hashing techniques. In this tutorial we will create a table of, and generates numbers link. When we click on the link then the related number will be focus.

We know the backbone features it is a lightweight framework that helps to create web projects that are more powerful. And it also provides the structure of JavaScript code in the Model View Controller. Here we use the basic implementation of the URL hashing with the router in Backbone's. Here we need to add these three JavaScript code:

<script src="js/jquery.min.js"></script>

<script src="js/underscore.js"></script>

<script src="js/backbone.js"></script>

Solution Explorer View

Now let's begin to create the application:

Step 1

Select Empty Web Application

Step 2

Now add the HTML page.

Add HTML page

Change name of the page

Add the following code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<link href="style.css" rel="stylesheet" />

<script src="js/jquery.min.js"></script>

<script src="js/underscore.js"></script>

<script src="js/backbone.js"></script>

<script src="js/router.js"></script>

</head>

<body>

<a class=" anchor" href="#one">One</a>

<a class=" anchor" href="#two">Two</a>

<a class=" anchor" href="#three">Three</a>

<a class=" anchor" href="#Four">Four</a>

<a class=" anchor" href="#Five">Five</a>

<a class=" anchor" href="#Six">Six</a>

<table class="val">

<tr>

<td id="one">1</td>

<td id="two">2</td>

</tr>

<tr>

<td id="three">3</td>

<td id="Four">4</td>

</tr>

<tr>

<td id="Five">5</td>

<td id="Six">6</td>

</tr>

</table>

<script type='text/javascript'>

$(document).ready(function () {

var appRouter = new AppRouter();

Backbone.history.start();

});

function grid(level) {

$("td").css("background-color", "#f2f2f2");

$("#" + level).css("background-color", "#80c8e5");

}

// Appending URL values into block

function gridNo(level, no) {

grid(level); // Calling grid function

$("#" + level).html(no); // Appending num value

}

</script>

</body>

</html>

In the code above we use the #(hash) in the anchor tag that is related to the "router.js" script file.

Step 3

Now in the project we add the "stylesheet".

Stylesheet

Add the following code to this stylesheet:

.val {

width: 500px;

height: 300px;

text-align: center;

font-size: 20pt;

font-weight: bold;

margin-top:30px;

}

.anchor{

background:black;

color:white;

font-size:15pt;

text-decoration:none;

padding:20px 20px 20px 20px;

}

.anchor:hover{

text-decoration :underline;

}

Step 4

Add the JavaScripts to our project.

Now we need to add various JavaScript files to our application. First we add our own script file in this project.

javascript file

Add the following code:

var AppRouter = Backbone.Router.extend({

routes: {

'': 'home',

'index.html': 'home',

':level': 'blockGrid',

'block/:level/:no': 'blockNo',

'*actions': 'defaultAction'

},

home: function () {

},

blockGrid: function (level) {

grid(level); // Calling grid function

},

blockNo: function (level, no) {

gridNo(level, no); // Calling gridNum function

},

});

Step 5

Now execute the application, the output will be like this:

Display Table

Now we click on the link:

Working of link

Click on the browser back and forward buttons and notice the page URL.