backbonejs往简单说，就是一前端MVC框架，适合用于单页面、复杂的前端逻辑。
直接上代码，里面都有相关注释，重点是理解清楚view、collection、model这三者如何关联调用。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>backbone实例01</title>
</head>
<body>
<input type="text" id="add">
<ul id="man-list">
</ul>
<script src="vendor/zepto.js"></script>
<script src="vendor/underscore.js"></script>
<script src="vendor/backbone.js"></script>
<script>
(function ($) {
//定义model
var People = Backbone.Model.extend({
defaults: {
name: null
}
}); //定义Collection
var Peoples = Backbone.Collection.extend({
model: People,//关联上了相关model
initialize: function(options) {
this.bind('add',options.view.show);//这里事件监听关键
}
}); //定义view
var AppView = Backbone.View.extend({
el: $("body"),
initialize: function() {
this.peoples = new Peoples({view: this});//关联上集合
},
events: {
'keypress #add': 'addMan'
},
addMan: function(e) {
var key = e.which;
if(key !== 13) return;
var name = $(e.target).val();
var people = new People({name:name});
this.peoples.add(people);//添加model到集合，与此同时会触发集合中的监听方法
},
show: function(model){//集合调用view中的方法，并能将集合中的model传递过来
var template = "<li>你们好，我是"+model.get('name')+"，请多多关照!</li>";
$('#man-list').append(template);
$('#add').val('');
}
}); new AppView();
})(Zepto);
</script>
</body>
</html>
该例中，入口是Appview，其初始化时就关联了一collection，在该collection中关联上了model，并添加了‘add’监听方法，该方法在往集合中添加model时出发，这里在出发时会调用view中的相关方法渲染页面。
backbone实例02。。。。。进行中。。。。。