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.
HTML
<!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;"> neveropen </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.
HTML
<!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;"> neveropen </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
