Introduction
Welcome to the "Demonstrating Backbone.js" article series. This article demonstrates how to create and use Routers in Backbone.js. This article starts with the concept of Backbone.js and various components of it. Previous articles have provided an introduction to views and the implementation of views. You can get them from the following:
What a Router is
Backbone routers are used for routing our applications URL's when using hash tags (#). We can use render to navigate through our application.
First let's start creating our Views.
In the following snippet I have created two templates. The first template has the label of my first view and it has a link to go to the second view, so when we click on the link it should render the second view.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
</head>
<body>
<script type="text/template" id="first_template">
<label>My 1st View</label>
<a href="#second">Go to 2nd View</a>
</script>
<script type="text/template" id="second_template">
<label>My 2nd View</label>
<a href="#first">Go to 1st View</a>
</script>
<div id="container">
</div>
<script type="text/javascript">
FirstView = Backbone.View.extend({
el: $('#container'),
initialize: function () {
this.render();
},
render: function () {
var template = _.template($('#first_template').html(), {});
this.$el.html(template);
}
});
SecondView = Backbone.View.extend({
el: $('#container'),
initialize: function () {
this.render();
},
render: function () {
var template = _.template($('#second_template').html(), {});
this.$el.html(template);
}
});
</script>
</body>
</html>
And we have created a div tag with the id of the container that will be displayed over templates to render and display them and the first view renderers our first template and the second view renders our second template into our DOM element. Now if we run the app nothing appears in the browser because we have not created an object, neither of our first view nor the second view. So we will handle all that using routers; we will display pages by navigating through views using routers.
Let's start creating Routers as shown below.
MyRouter = Backbone.Router.extend({
routes: {
'': 'firstpage',
'first': 'firstPage',
'second': 'secondPage'
},
firstPage: function () {
new FirstView();
},
secondPage: function () {
new SecondView();
}
});
var router = new MyRouter();
Backbone.history.start();
Here in the default URL I am displaying our first page and if the first appears then it should navigate to the second page and viceversa.
Summary
In this article, I explained how to use routers in Backbone.js, In future articles we will understand more about Routers with examples.
Next article: Demonstrating Backbone.js: Implement Collections Part 2