Backbone.js navigate Router
Last Updated :
18 Aug, 2022
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>
type="text/javascript"></script>
<script src=
type="text/javascript"></script>
<script src=
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>
type="text/javascript"></script>
<script src=
type="text/javascript"></script>
<script src=
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...