Backbone.js History

Last Updated : 05 Sep, 2022

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>
    <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.

HTML

<!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>