Backbone.js navigate Router

Last Updated : 22 Jul, 2024

Backbone.js is a compact library used to organize JavaScript code. MVC/MV* framework is another term for it. If you're not familiar, MVC is just a design approach for user interfaces. Designing the user interface of programs is significantly easier when JavaScript features are used. A few of the building elements that are offered in BackboneJS to assist developers in creating client-side web applications are models, views, events, routers, and collections.

The Navigate Router is mainly used to save the application as a URL, it is called to update the URL. It has two options trigger and replace. The activity of the trigger is to let the route to still call the route function when set to true. And when we add the replace option with true as value it allows us to update the URL without creating any changes in the Browser History.

Syntax:

router.navigate(fragment, options)

Parameters:

fragment: It is the name of the parameter in which the URL that follows this parameter will be shown.
options: This parameter holds the options like trigger and replaces that allow you to call the route function and change the URL.

Example 1: The code below demonstrates how we can update the URL to what we desire when the callback of the route is matched.

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>Backbone.js navigate Router</h3>

    <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 () {
                this.navigate("#/default");
            },
            firstRoute: function () {
                this.navigate("#/first");
            },
            secondRoute: function () {
                this.navigate("#/second");
            },
            thirdRoute: function () {
                this.navigate("#/third");
            },
        });

        router = new Router();
        Backbone.history.start();
    </script>
</body>

</html>

Output:

Example 2: The code below demonstrates how we can update the URL by applying the onclick function in the view.

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>

    <script type="text/javascript">
        var Route_1 = Backbone.View.extend({
            el: "#menu",
            events: {
                "click a": "onClick",
            },
            onClick: function (e) {
                router.navigate("/");
            },
        });
        var Router = Backbone.Router.extend({
            routes: {
                "route/:id": "defaultRoute",
            },
        });
        var route = new Route_1();
        Backbone.history.start();
    </script>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3>Backbone.js navigate Router</h3>

    
<p>
        It refers to the view class 'Menu' and 
        creates the 3 links which changes the 
        url when you click on the links
    </p>


    <section id="menu">
        <ul>
            <li><a href="#/route/1">
                Click to view first route
            </a></li>
            <li><a href="#/route/2">
                Click to view second route
            </a></li>
            <li><a href="#/route/3">
                Click to view third route
            </a></li>
        </ul>
    </section>
</body>

</html>

Output:

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

Backbone.js extend Router

triashabiswas

Improve

Article Tags :

Backbone.js navigate Router

Similar Reads

Thank You!

What kind of Experience do you want to share?