官方網站是這樣描述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