<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Backbone.js execute 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 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
>