<!DOCTYPE html>
<html>
<head>
<title>Backbone Example</title>
<link rel="stylesheet" href="lib\css\todos.css" />
<script src="lib/js/jquery-1.9.1.js"></script>
<script src="lib/js/underscore.js"></script>
<script src="lib/js/backbone.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="div1"></div>
<a href="/#view1">View 1</a>
<a href="/#view2">View 2</a>
<a href="/#view3/100">View 3</a>
</body>
</html>
jQuery(document).ready(function($) {
var View1 = Backbone.View.extend({
el: '#div1',
initialize: function() {
this.render();
},
render: function() {
this.$el.html('This is view 1 ...');
}
});
var View2 = Backbone.View.extend({
el: '#div1',
initialize: function() {
this.render();
},
render: function() {
this.$el.html('This is view 2 ...');
}
});
var View3 = Backbone.View.extend({
el: '#div1',
initialize: function() {
this.render();
},
render: function() {
this.$el.html('This is view 3 ...');
}
});
var ProjectRoute = Backbone.Router.extend({
routes: {
"view1": "ShowView1",
"view2": "ShowView2",
"view3/:id": "ShowView3"
},
ShowView1: function() {
var view1 = new View1();
},
ShowView2: function() {
var view2 = new View2();
},
ShowView3: function(id) {
console.log(id);
var view3 = new View3();
}
});
ProjectRouteObj = new ProjectRoute();
Backbone.history.start();
});
