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