Introduction
In this article I will explain Routers in Backbone.js. Routers are used for associating the application events with an URL and handle the application. Backbone.js is used for the routers for execution of the actions. In Backbone, routes use the # character in the URL. It is very familiar for us if we use it in an anchor to link part of the application without going to the other URL.
Using routers in a backbone.js application
We have a HTML file in which we have loaded "Backbone.js" and its dependency library, "underscore.js". We also load the jQuery in the HTML page because it has an "on" method that catches the events thrown by Backbone.
Now we can see the HTML page in which various JavaScript files are loaded. We need to create an ASP.NET web application in which we add an HTML page.
- Start Visual Studio 2013.
- From the Start window select "New Project".
- Select "Installed" -> "Template" -> "Visual C#" -> "Visual Studio 2012" and select "Empty web Application".
![Select web application]()
Now we need to add a HTML page in this application.
- Right-click on the project and select "Add" -> "HTML Page".
![Add HTML Page]()
- Change the name of the page.
![Set Name]()
- Click on the "OK" button.
Add the following code in this page.
<!DOCTYPE html>
<html>
<head>
<title>Backbone Application</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="js/underscore.js" type="text/javascript"></script>
<script src="js/backbone.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
</script>
</body>
</html>
Now we define some routes in the <script> section by declaration of this code:
var Router = Backbone.Router.extend({
routes: {
"": "home", // url:event that fires
}
});
var router = new Router;
Now we add the following code to this page:
router.on('route:home', function () {
alert('Loading of the View')
});
Backbone.history.start();
Add new routes:
Now add another Router:
var Router = Backbone.Router.extend({
routes: {
"": "home", // url:event that fires
"edit/:id": "editItem",
}
});
var router = new Router;
Parameters and splats:
The contents of pages populated depend on the parameters. These parameters decide which profile shows and how it can be shown. Backbone provides the facility to pass the parameters.
To add the new route:
var Router = Backbone.Router.extend({
routes: {
"": "home", // url:event that fires
"edit/:id": "editItem",
}
});
var router = new Router;
Now to add the on method:
router.on('route:editItem', function (idParam) {
alert('Edit the Entry Number ' + idParam);
});
The entire code of the HTML page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Backbone Application</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="js/underscore.js" type="text/javascript"></script>
<script src="js/backbone.js" type="text/javascript"></script>
</head>
<body>
<p><a href="#" class="goHome">Home</a></p>
<p><a href="#" class="goEdit">Edit User #4</a></p>
<script>
var Router = Backbone.Router.extend({
routes: {
"": "home", // url:event that fires
"edit/:id": "editItem",
}
});
var router = new Router;
router.on('route:home', function () {
alert('Loading of the View')
});
router.on('route:editItem', function (idParam) {
alert('Edit the Entry Number ' + idParam);
});
Backbone.history.start();
$('.goHome').click(function () {
router.navigate('', { trigger: true });
return false;
});
$('.goEdit').click(function () {
router.navigate('edit/4', { trigger: true });
return false;
});
</script>
</body>
</html>
Now execute the application. It displays 2 links and when it executes it first displays an alert box and when we click on another link then it displays another link.
![alert for Home]()
![alert for Edit]()