原文章地址http://bigdots.github.io/2015/12/01/Backbone學習筆記（一）/#more
Backbone.js為復雜WEB應用程序提供模型(models)、集合(collections)、視圖(views)的結構。其中models用於綁定鍵值數據和自定義事件；collections附有可枚舉函數的豐富API； views可以聲明事件處理函數，並通過RESRful JSON接口連接到應用程序。
下面通過實例來學習backbone的MVC。實例來自http://dmyz.org/archives/598。原文章雖然是入門范例，但大牛的入門對我這種菜逼來說還是看不懂，所以我在其原來的例子上進行了一些取舍並對一些代碼進行了注釋。
Backbone.js 中文文檔:http://www.css88.com/doc/backbone/
HTML代碼，只要把backbone的代碼放入其內運行即可：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script> 5 <script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script> 6 <script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script> 7 8 <link href="http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 9 </head> 10 <body> 11 <table id="js-id-gists" class="table"> 12 <thead><th>description</th><th>URL</th><th>created_at</th></thead> 13 <tbody></tbody> 14 </table> 15 16 <script> 17 //backbone.... 18 </script> 19 </body> 20 </html>
首先是M:
//創建一個自定義模型類
var Gist = Backbone.Model.extend({
url: 'https://api.github.com/gists/public',
//backbone提供了一個parse方法,它會在 fetch及 save 時執行。
//傳入本函數的為原始 response 對象,這個方法提供傳入兩個參數，並返回第一個參數。
parse:function(response){
return (response[0])
},
//默認屬性值設置，如果屬性中沒有website（注意不是website值為空），會設置website值為dmyz。
defaults:{
website:'dmyz'
},
//驗證事件，當website值為dmyz時觸發
validate:function(attrs){
if(attrs.website == 'dmyz'){
return 'website error'
}
}
})
gist = new Gist(); //實例化模塊
gist.on("validate",function(model,error){
alert(error)
})
//get collection.get(id) 通過一個id，一個cid，或者傳遞一個model來獲得集合中的模型。
gist.on('change',function(model){ //綁定一個change事件
var tbody = document.getElementById('js-id-gists').children[1],
tr = document.getElementById(model.get('id'));
if(!tr){
tr = document.createElement('tr');
tr.setAttribute('id',model.get('id'));
}
tr.innerHTML="<td>"+model.get('description')+"</td><td>"+model.get('url')+"</td><td>"+model.get('created_at') + '</td>';
tbody.appendChild(tr);
})
//從遠程獲取數據，獲到數據后會觸發change事件
// gist.fetch();
// 將數據存儲到數據庫
gist.save()
整個過程:
- 創建自定義模型類，並實例化
- gist.fetch()從遠程拉取數據，觸發了change事件
- 綁定在gist上的change事件執行（model是其數據模型），通過model.get()來獲取數據，渲染到頁面
- 在本例中，可以看出model是數據模型，起到操作數據的作用。
M+V:
1 var Gist = Backbone.Model.extend({ 2 url: 'https://api.github.com/gists/public', 3 parse:function(response){ 4 return (response[0]) 5 } 6 }) 7 8 //實例化模塊 9 gist = new Gist(); 10 11 //創建一個自定義視圖類 12 var GistRow = Backbone.View.extend({ 13 //所有的視圖都擁有一個 DOM 元素（el 屬性），即使該元素仍未插入頁面中去。 視圖可以在任何時候渲染，然后一次性插入 DOM 中去，這樣能盡量減少 reflows 和 repaints 從而獲得高性能的 UI 渲染。 14 15 el:'tbody', 16 17 //指定視圖的數據模型 18 Model:gist, 19 20 //initialize為初始化函數，創建視圖時，它會立刻被調用。 21 //initialize函數在this上監聽Model的change事件，發生改變時時觸發render事件 22 initialize:function(){ 23 this.listenTo(this.Model,'change',this.render); 24 }, 25 26 //渲染視圖 27 render:function(){ 28 var model =this.Model, 29 tr = document.createElement('tr'); 30 tr.innerHTML='<td>' + model.get('description') + '</td><td>' + model.get('url') + '</td><td>' + model.get('created_at') + "</td>"; 31 this.el.innerHTML = tr.outerHTML; 32 // console.log(this.el) 33 return this; 34 } 35 }); 36 37 //實例化GistRow,立即執行initialize函數 38 var tr = new GistRow(); 39 gist.fetch();
整個過程：
- 創建自定義模型類，並實例化
- 創建自定義視圖類，並實例化，指定模型
- 立即執行initialize函數，監聽model的change事件，
- fetch()事件獲取遠程數據，觸發change事件，執行render事件
M+V+C:
1 var Gist = Backbone.Model.extend(); 2 3 //創建一個自定義集合類（collection） 4 var Gists = Backbone.Collection.extend({ 5 //指定集合（collection）中包含的模型類 6 model:Gist, 7 url:'https://api.github.com/gists/public', 8 parse:function(response){ 9 return response; 10 } 11 }) 12 13 gists = new Gists(); 14 15 //創建一個視圖類，其作用是渲染每一行的視圖 16 var GistRow = Backbone.View.extend({ 17 //tagName, className, 或 id 為視圖指定根元素 18 tagName:'tr', 19 render:function(model){ 20 this.el.id = model.cid; 21 this.el.innerHTML = '<td>' + model.get('description') + '</td><td>'+ model.get('url') + '</td><td>' + model.get('created_at')+"</td>" 22 return this; 23 } 24 }) 25 26 var GistView = Backbone.View.extend({ 27 el:'tbody', 28 // 指定集合類 29 collection:gists, 30 31 //初始化函數，實例化時立即執行 32 initialize:function(){ 33 this.listenTo(this.collection,'reset',this.render); 34 }, 35 36 //渲染視圖 37 render:function(){ 38 var html = ''; 39 //collection.models 訪問集合中模型的內置的JavaScript 數組 40 //遍歷所有models，設置他們的html 41 _.forEach(this.collection.models,function(model){ 42 var tr = new GistRow(); 43 html += tr.render(model).el.outerHTML; 44 }) 45 this.el.innerHTML = html; 46 return this; 47 } 48 }); 49 50 //實例化GistRow,調用initialize函數 51 var gistsView = new GistView(); 52 gists.fetch({reset:true});
整個過程：
- 創建一個自定義模型類和集合類，實例化集合類
- 創建倆個自定義視圖類，一個渲染每行的數據，一個渲染整個頁面
- 實例化視圖類GistView，在集合類上綁定監聽事件
- fetch()觸發監聽事件，執行render函數，遍歷所有models
- 在render函數中實例化視圖類GistRow,，渲染每行