Backbone.js execute Router

Last Updated : 19 Jul, 2024

Backbone.js is a compact library used to organize JavaScript code. Another name for it is an MVC/MV* framework. If you're not familiar, MVC is simply an architecture paradigm for creating user interfaces. Using JavaScript functions makes it much simpler to design the user interface of programs. Models, views, events, routers, and collections are just a few of the building blocks that are available in BackboneJS to help developers build client-side web applications.

The Execute method is invoked internally by the router when the router matches its matching callback. If you want your routes to be customized for parsing or wrapping, you can override the execute function. Also, you can terminate the current transition by returning false from this method.

Syntax:

router.execute(callback, args)

Used Parameters:

callback: It executes when the router matches its matching callback.
args: This specifies the arguments that are passed within the execute method.

Example 1: The code below demonstrates how we can execute console.log statements when the specific callback is matched.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Backbone.js execute 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>Backbone.js execute Router</h3>

    <div id="navigation">
        <a href="#/route/1">
            Click to view first route
        </a>
        <a href="#/route/2">
            Click to view second route
        </a>
    </div>

    <script type="text/javascript">

        // 'Route_1' is a name of the view class
        var Route_1 = Backbone.View.extend({
            
            // For the router's instantiation, the 
            // "initialize" function produces a 
            // new constructor
            initialize: function () {
                this.execute();
            },

            // When a route matches its matching
            // callback, this is invoked.
            execute: function () {
                $a = console.log("Hello this is 1st view");
            },
        });

        var Route_2 = Backbone.View.extend({
            initialize: function () {
                this.execute();
            },
            execute: function () {
                $b = console.log("Hello this is 2nd view");
            },
        });

        //'AppRouter' is a name of the router class
        var AppRouter = Backbone.Router.extend({
            routes: {
                "route/1": "firstRoute",
                "route/2": "secondRoute",
            },

            // On clicking on 1st Link, it will navigate
            // to the custom view class 'Route_1'
            firstRoute: function () {
                var route_1 = new Route_1();
                route_1.a;
            },

            // On clicking on 2nd Link, it will navigate
            // to the custom view class 'Route_2'
            secondRoute: function () {
                var route_2 = new Route_2();
                route_2.b;
            },
        });

        // It is an instantiation of the router
        var appRouter = new AppRouter();

        // It start listening to the routes and 
        // manages the history for bookmarkable URL's
        Backbone.history.start();
    </script>
</body>

</html>

Output:

Example 2: The code below demonstrates how we can use execute method to execute templates of a view when the callback is matching.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Backbone.js execute 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>Backbone.js execute Router</h3>

    <div id="navigation">
        <a href="#/route/1">
            Click to view first route
        </a>
        <a href="#/route/2">
            Click to view second route
        </a>
    </div>

    <div id="content"></div>

    <script type="text/javascript">

        // 'Route_1' is a name of the view class
        var Route_1 = Backbone.View.extend({
            
            // Creates the route_1 link so that the
            // text can be changed once the click
            // event is triggered.
            template: "<b>This is the first Route "
                + "opened after clicking first link.</b>",

            // For the router's instantiation, the 
            // "initialize" function produces a new
            // constructor
            initialize: function () {
                this.execute();
            },

            // When a route matches its matching
            // callback, this is invoked.
            execute: function () {
                this.$el.html(this.template);
            },
        });

        var Route_2 = Backbone.View.extend({
            template: "<b>This is the second Route opened"
                + " after clicking second link.</b>",
            initialize: function () {
                this.execute();
            },
            execute: function () {
                this.$el.html(this.template);
            },
        });

        // 'AppRouter' is a name of the router class
        var AppRouter = Backbone.Router.extend({
            routes: {
                "route/1": "firstRoute",
                "route/2": "secondRoute",
            },

            // On clicking on 1st Link, it will navigate
            // to the custom view class 'Route_1'
            firstRoute: function () {
                var route_1 = new Route_1();
                $("#content").html(route_1.el);
            },

            // On clicking on 2nd Link, it will navigate
            // to the custom view class 'Route_2'
            secondRoute: function () {
                var route_2 = new Route_2();
                $("#content").html(route_2.el);
            },
        });

        // It is an instantiation of the router
        var appRouter = new AppRouter();

        // It start listening to the routes and 
        // manages the history for bookmarkable URL's
        Backbone.history.start();
    </script>
</body>

</html>

Output:

Reference: https://backbonejs.org/#Router-extend

Backbone.js execute Router

triashabiswas

Improve

Article Tags :

Backbone.js execute Router

Used Parameters:

Similar Reads

Thank You!

What kind of Experience do you want to share?