<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Backbone.js template View</
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 template View</
h3
>
<
div
id
=
"content"
></
div
>
<
script
type
=
"text/javascript"
>
var Route1 = Backbone.View.extend({
template: _.template("GeeksforGeeks: <%= tagline %>"),
initialize: function () {
this.execute();
},
execute: function () {
this.$el.html(this.template({
tagline: 'A Computer Science Portal for Geeks' }));
}
});
var Route2 = Backbone.View.extend({
template: _.template("GeeksforGeeks: <%= tagline %>"),
initialize: function () {
this.execute();
},
execute: function () {
this.$el.html(this.template({
tagline: 'A portal for high quslity '
+ 'articles on technology.' }));
}
});
var AppRouter = Backbone.Router.extend({
routes: {
'': 'default',
'route/1': 'homeRoute',
'route/2': 'aboutRoute',
},
default: function () {
$("#content").html("We haven't triggered any template.");
},
homeRoute: function () {
var route1 = new Route1();
$("#content").html(route1.el);
},
aboutRoute: function () {
var route2 = new Route2();
$("#content").html(route2.el);
}
});
var appRouter = new AppRouter();
Backbone.history.start();
</
script
>
</
body
>
</
html
>