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 >
type = "text/javascript" ></ script >
< script src =
type = "text/javascript" ></ script >
< script src =
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 >
type = "text/javascript" ></ script >
< script src =
type = "text/javascript" ></ script >
< script src =
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 >
|
Output:
Reference: https://backbonejs.org/#History-start