开始backbone
官方网站是这样描述backbone.js的，它是一个用来组织大量JS的良好框架。
了解什么是MVC模式
我用过很多声称是MVC的框架，但我认为我并未见过遵循相同的规则来实现相同的方法。
backbone.js有四种类型：Models, Views, Controllers和Collections. Models和Collections类关系密，当它们组合在一起就行成了M(model).
当我在用Backbone.js的时候，我所采用的主要内容是让Views来监听Model的改变，然后其做出相应的改变。我推荐把backbone的文档和源码都仔细的阅读一番
开始
我在开始的时候，往往习惯于让你快速的浏览一下我的整个示例，让你有一个正确的学习路线，不致于像我似的刚开始学习的时候误入歧途。
首先，我来建立一个页面，它包含backbone.js和Underscore.js(这是我们的主角所依赖的Js库）。
<!DOCTYPE html>
<html>
<head>
<title>I have a back bone</title>
</head>
<body>
<button id="add-friend">Add Friend</button>
<ul id="firends-list">
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
</body>
</html>
设立主View
每一个view都会有一个相应的DOM element和它相关联。至于为什么你可以参考以下内容:
以下内容来自backbone的官方网站：http://documentcloud.github.com/backbone/#View-el,
elview.el,所有的Views总是有一个DOM element.（the el property)， 不管它们是已经在page中还是不在。这样，views在任何时候都可以显示，也可以全部插入DOM中。为了追求高效的UI显示，尽量用更少的重排和重画。 this.el可以通过view的tagName, className,id和attributes，这些来构建。而如果以上列举的并没有出现，那么会创建一个空的div
var ItemView=Backbone.view.extend({tagName:'li'});
var BodyView=Backbone.view.extend({el:'body'});
var item=new ItemView();
var body=new BodyView();
因为这是我们的master view,所以我们会设body。如果一个指定的el(element)不存在，那么Backbone.js就会试图创建它。
(function($){
window.AppView=Backbone.View.extend({
el:$("body"),
events:{
"click #add-friend":"showPrompt",
},
showPrompt:function(){
var friend_name=prompt("Who is your friend?");
}
});
var appView=new AppView;
})(jQuery);
我们仅仅是把我们的Backbone代码用jQuery来包装了一下来确实我们的page能正确的加载。然后我们创建我们的主程序View通过扩展Backbone 并传递一个JSON对象做为参数。我们指定‘body'做为我们View相关的element.
events属性是非常有用的并且让我们来监听我们的views.在这个示例中，我们绑定一个click事件到id为"add-friend"的按钮上。
我们已经设置了我们的程序View, 我们现在可以在任何时候来初始化它了。
Collecting the Models
一个model在backbone.js中可以代表任何的一个实体，而在这个示例中我们希望它代表一个朋友。我们可以很轻松的创立一个朋友Model不用任何的结构，但是它对我们是作用不大的，因为我们不能迭代它们除非我们让他们在一起。Backbone.js通过一个Collection Class让我们来排列我们的models
现在让我们来开始我们之中的有趣的部分，你可以绑定listeners/events至一个Models和collections.不论何时我们改变任何的数据都会让evens来做出相应的改变。
让我们把一个friend Model加到我们的firend collection.然后让我们来绑定一个listener来创建一个新的list element当相应的数据被改变的时候。
(function($){
Firend=Backbone.Model.extend({
//Create a model to hold firend attribute
name:null
});
Friends=Backbone.Collection.extend({
//This is our friends collection and hols our friend models
initialize:function(models, options){
this.bind("add", options.view.addFriendLi);
//Listen for new additions to the collection and all a view function if so
}
});
AppView=Backbone.View.extend({
el:$("body"),
initialize:function(){
this.friends=new Friends(null, {view:this});
//Create a friends collection when the view is initialized,
//Pass it a reference to this view to create a connection between the two
},
events:{
"click #add-friend":"showPrompt"
},
addFriendLi:function(model){
$("#friends-list").append("<li>"+model.get('name')+"</li>");
},
showPrompt:function(){
var friend_name=prompt("who is your friend?");
var firend_model=new Friend({name: friend_name});
this.firends.add(friend_model);
}
});
var appView=new AppView;
})(jQuery);
Demo:http://thomasdavis.github.com/examples/backbone-101/
Code:https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-101
原文：http://thomasdavis.github.com/2011/02/01/backbone-introduction.html