使用Backbone.js 和 MVC 架构创建一个典型的Hello world项目。虽然是“杀鸡用牛刀了”，毕竟是我第一次使用Backbone.js
依赖
jQuery 1.9.1
Undersore.js 1.5.0
Backbone.js
开始
<!doctype html><html><head><meta charset="utf-8"><title>backbone日常练习</title></head><body><div></div><script src="js/jquery.min.js"></script><script src="js/Underscore.min.js"></script><script src="js/backbone-min.js"></script><script>
// 开启Backbone学习之旅</script></body></html>
在 extend 调用里设置指定的 routes 属性:
var router = Backbone.Router.extend({ routes: { ' ': 'home'
}
});Backbone中routes 属性需要下面的格式： ‘path/:param’: 'action'，它实现了是当URl是 filename#path/param时， 触发名为action 的函数（在Router 对象里定义）。然后添加一个 home 路由：
var router = Backbone.Router.extend({ routes: { ' ': 'home'
}
});现在我们需要添加一个 home 函数：
var router = Backbone.Router.extend({
routes: { ' ': 'home'
}
‘home’: function (){ // 渲染 HTML
}
});添加创建和渲染 View 的逻辑。现在先定义 homeView:
var homeView = Backbone.View.extend({
});然后给 homeView 添加属性
var homeView = Backbone.View.extend({
el: 'body', teplate: _.template('Hello world!')
});el 是一个保存 jQuery 选择器的字符串，也可以使用'.'作为类和'#'作为ID名。template属性被赋值给传入 Hello World 的 Underscore.js 函数 template 运行的结果。
渲染 homeView， 我们使用 this.$el， 这是一个 jQuery 对象，它指向 el 的属性，使用 jQuery.html() 函数使用 this.template() 的结果替换 HTML。 下面是完整的 homeView 代码：
var homeView = Backbone.View.extend({
el: 'body',
template: _.template('Hello World'),
render: function (){ this.$el.html(this.template({}));
}
});现在我们返回到 router，添加两行到 home 函数：
var router = Backbone.Router.extend({
routes: { '': 'home'
},
initialize: function (){ // 一些在对象初始化的时候执行的代码
},
home: function (){ this.homeView = new homeView; this.homeView.render();
}
});第一行创建了一个 homeView 对象并且赋值给 router 的 homeView 属性。第二行调用 homeView 对象的 render() 方法，触发 Hello World! 输出。
最后，启动整体 Backbone 应用，为了保证 Dom 完全加载， 用 $(function (){}) 包装器调用 new router：
var app;
$(function (){
app = new router;
Backbone.history.start();
});完整DEMO
<!doctype html><html><head><meta charset="utf-8"><title>backbone日常练习</title></head><body><div></div><script src="js/jquery.min.js"></script><script src="js/Underscore.min.js"></script><script src="js/backbone-min.js"></script><script>
var app; var router = Backbone.Router.extend({
routes: { '': 'home'
},
initialize: function (){ // 一些在对象初始化的时候执行的代码
},
home: function (){ this.homeView = new homeView; this.homeView.render();
}
}); var homeView = Backbone.View.extend({
el: 'body',
template: _.template('Hello World'),
render: function (){ this.$el.html(this.template({}));
}
});
$(function (){
app = new router;
Backbone.history.start();
});</script></body></html>