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>
Now let's begin to create the application:
Step 1
- Start Visual Studio 2013. From the Start window select "New Project".
- Select "Installed" -> "Template" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and select "Empty Web Application".
![Select Empty Web Application]()
Step 2
Now add the HTML page.
- In the Solution Explorer.
- Right-click on the project then select "Add" -> "HTML page".
![Add HTML page]()
- Change the name of the page.
![Change name of the page]()
- Click on the "Add" button.
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".
- Right-click on the project.
- Select "New Item" and then "Style Sheet".
![Stylesheet]()
- Click on the "Add" button.
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.
- Right-click on the Scripts folder and select "Add".
- Select "New Item" ->"JavaScript".
![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:
Click on the browser back and forward buttons and notice the page URL.