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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
