Backbone.js is a compact library used to organize JavaScript code. An MVC/MV* framework is another term for it. If MVC is unfamiliar to you, it is just a technique for designing user interfaces. The creation of a program's user interface is made considerably easier by JavaScript functions. BackboneJS provides a variety of building elements to aid developers in creating client-side web applications, including models, views, events, routers, and collections.
Backbone's History is a global router that keeps track of the past and enables routing in the application. We must create the router class and call Backbone.history in order to instantiate a route and begin monitoring the navigation history. Start allowing the backbone to manage history and begin listening to routes.
Syntax:
Backbone.history.start(options)Parameters:
- options: This includes parameters like hasChange or pushChange to use with history.
Example 1: The code demonstrates how when you navigate to routes and the URL gets updated and you can bookmark it.
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js navigate Router</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript"></script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Explain Backbone.history.</h3>
<div id="content"></div>
<div class="container-fluid">
<ul>
<li><a href="#/">Default Route</a></li>
<li><a href="#/1">First Route</a></li>
<li><a href="#/2">Second Route</a></li>
<li><a href="#/3">Third Route</a></li>
</ul>
</div>
<script type="text/javascript">
var Router = Backbone.Router.extend({
routes: {
"": "defaultRoute",
"1": "firstRoute",
"2": "secondRoute",
"3": "thirdRoute",
},
defaultRoute: function () {
},
firstRoute: function () {
document.write("First Route Called");
},
secondRoute: function () {
document.write("Second Route Called");
},
thirdRoute: function () {
document.write("Third Route Called");
},
});
router = new Router({});
Backbone.history.start();
</script>
</body>
</html>
Output:
Example 2: The code demonstrates how you can add routes to navigate to different views, you can observe how the URL gets updated and you can bookmark it.
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js navigate Router</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript"></script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Explain Backbone.history.</h3>
<div id="content"></div>
<div class="container-fluid">
<ul>
<li><a href="#/1">Go to First View</a></li>
<li><a href="#/2">Go to Second View</a></li>
<li><a href="#/3">Go to Third Route</a></li>
</ul>
</div>
<script type="text/javascript">
// By default, it calls function Open_View1
var view1 = Backbone.View.extend({
el: "#content",
initialize: function () {
this.$el.html("Hello Geek. This is View 1");
}
});
var view2 = Backbone.View.extend({
el: "#content",
initialize: function () {
this.$el.html("Hello Geek. Welcome to View 2");
}
});
var view3 = Backbone.View.extend({
el: "#content",
initialize: function () {
this.$el.html("Welcome geek. This is the View 3");
}
});
var Router = Backbone.Router.extend({
routes: {
"1": "Open_View1",
"2": "Open_View2",
"3": "Open_View3"
},
Open_View1: function () {
var Obj_1 = new view1();
},
Open_View2: function () {
var Obj_2 = new view2();
},
Open_View3: function () {
var Obj_3 = new view3();
}
});
router = new Router({});
Backbone.history.start();
</script>
</body>
</html>