<script type="text/javascript">
var Route1 = Backbone.View.extend({
template: '<b>This is route 1</b>',
initialize: function () {
this.execute();
},
execute: function () {
this.$el.html(this.template);
}
});
var Route2 = Backbone.View.extend({
template: '<b>This is route 2</b>',
initialize: function () {
this.execute();
},
execute: function () {
this.$el.html(this.template);
}
});
var AppRouter = Backbone.Router.extend({
routes: {
'': 'homeRoute',
'route/1': 'homeRoute',
'route/2': 'aboutRoute',
},
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>
</head>
<body>
<div id="navigation">
<a href="#/route/1">route1</a>
<a href="#/route/2">route2</a>
</div>
<div id="content"></div>
</body>