Model
關於backbone，最基礎的一個東西就是model，這個東西就像是後端開發中的數據庫映射那個model一樣，也是數據對象的模型，並且應該是和後端的model有相同的屬性（僅是需要通過前端來操作的屬性）。
下面就從實例來一步一步的帶大家來了解backbone的model到底是什麼樣的一個東西。
首先定義一個html的頁面：
<!DOCTYPE html><html><head><title>the5fire-backbone-model</title></head><body></body><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><script>(function ($) {/** *此處填充代碼**/})(jQuery);</script></html>下面的代碼需要填到這個html的script標籤中的function中。
1、最簡單的一個對象
Man = Backbone.Model.extend({ initialize: function(){ alert('Hey, you create me!'); } });var man = new Man;這個就很簡單了，在helloworld裡面也有了一個model的展現，不定義了屬性，這裡是一個初始化時的方法，或者稱之為構造函數。
2、對象賦值的兩種方法
第一種，直接定義，設置默認值。
Man = Backbone.Model.extend({ initialize: function(){ alert('Hey, you create me!'); }, defaults: { name:'張三', age: '38' }});var man = new Man;alert(man.get('name'));第二種，賦值時定義
Man = Backbone.Model.extend({ initialize: function(){ alert('Hey, you create me!'); }});man.set({name:'the5fire',age:'10'});alert(man.get('name'));取值的時候都是用get。
3、對像中的方法
Man = Backbone.Model.extend({ initialize: function(){ alert('Hey, you create me!'); }, defaults: { name:'張三', age: '38' }, aboutMe: function(){ return '我叫' + this.get('name') + ',今年' + this.get('age') + '歲'; }});var man = new Man;alert(man.aboutMe());4、監聽對像中屬性的變化
Man = Backbone.Model.extend({ initialize: function(){ alert('Hey, you create me!'); //初始化時綁定監聽this.bind("change:name",function(){ var name = this.get("name"); alert("你改變了name屬性為：" + name); }); }, defaults: { name:'張三', age: '38' }, aboutMe: function(){ return '我叫' + this.get('name') + ',今年' + this.get('age') + '歲'; }});var man = new Man;man.set({name:'the5fire'}) //觸發綁定的change事件，alert。5、為對象添加驗證規則，以及錯誤提示
Man = Backbone.Model.extend({ initialize: function(){ alert('Hey, you create me!'); //初始化時綁定監聽this.bind("change:name",function(){ var name = this.get("name"); alert("你改變了name屬性為：" + name); }); this.bind("error",function(model,error){ alert(error); }); }, defaults: { name:'張三', age: '38' }, validate:function(attributes){ if(attributes.name == '') { return "name不能為空！"; } }, aboutMe: function(){ return '我叫' + this.get('name') + ',今年' + this.get('age') + '歲'; }});var man = new Man;man.set({name:''}); //根據驗證規則，彈出錯誤提示。6、對象的獲取和保存，需要服務器端支持才能測試。
首先需要為對象定義一個url屬性，調用save方法時會post對象的所有屬性到server端。
Man = Backbone.Model.extend({ url:'/save/', initialize: function(){ alert('Hey, you create me!'); //初始化時綁定監聽this.bind("change:name",function(){ var name = this.get("name"); alert("你改變了name屬性為：" + name); }); this.bind("error",function(model,error){ alert(error); }); }, defaults: { name:'張三', age: '38' }, validate:function(attributes){ if(attributes.name == '') { return "name不能為空！"; } }, aboutMe: function(){ return '我叫' + this.get('name') + ',今年' + this.get('age') + '歲'; }});var man = new Man;;man.set({name:'the5fire'});man.save(); //會發送POST到模型對應的url，數據格式為json{"name":"the5fire","age":38}//然後接著就是從服務器端獲取數據使用方法fetch([options])var man1 = new Man;//第一種情況，如果直接使用fetch方法，那麼他會發送get請求到你model的url中， //你在服務器端可以通過判斷是get還是post來進行對應的操作。 man1.fetch();//第二種情況，在fetch中加入參數，如下：man1.fetch({url:'/getmans/'}); //這樣，就會發送get請求到/getmans/這個url中， //服務器返回的結果樣式應該是對應的json格式數據，同save時POST過去的格式。 //不過接受服務器端返回的數據方法是這樣的：man1.fetch({url:'/getmans/',success:function(model,response){ alert('success'); //model為獲取到的數據alert(model.get('name')); },error:function(){ //當返回格式不正確或者是非json數據時，會執行此方法alert('error'); }});注：上述代碼僅僅均為可正常執行的代碼，不過關於服務器端的實例在後面會有。
這裡還要補充一點，就是關於服務器的異步操作都是通過Backbone.sync這個方法來完成的，調用這個方法的時候會自動的傳遞一個參數過去，根據參數向服務器端發送對應的請求。比如你save，backbone會判斷你的這個對像是不是新的，如果是新創建的則參數為create，如果是已存在的對像只是進行了改變，那麼參數就為update，如果你調用fetch方法，那參數就是read，如果是destory，那麼參數就是delete。也就是所謂的CRUD ("create", "read", "update", or "delete")，而這四種參數對應的請求類型為POST，GET，PUT，DELETE。你可以在服務器根據這個request類型，來做出相應的CRUD操作。
Note:
關於url和urlRoot的事，如果你設置了url，那麼你的CRUD都會發送對應請求到這個url上，但是這樣又一個問題，就是delete請求，發送了請求，但是卻沒有發送任何數據，那麼你在服務器端就不知道應該刪除哪個對象（記錄），所以這裡又一個urlRoot的概念，你設置了urlRoot之後，你發送PUT和DELETE請求的時候，其請求的url地址就是：/baseurl/[model.id]，這樣你就可以在服務器端通過對url後面值的提取更新或者刪除對應的對象（記錄）。
Collection
collection是model對象的一個有序的集合，概念理解起來十分簡單，在通過幾個例子來看一下，會覺得更簡單。
1、關於book和bookshelf的例子
Book = Backbone.Model.extend({defaults : { // 感謝網友藍色動力指正改為defaultstitle:'default'},initialize: function(){//alert('Hey, you create me!');}});BookShelf = Backbone.Collection.extend({model : Book});var book1 = new Book({title : 'book1'});var book2 = new Book({title : 'book2'});var book3 = new Book({title : 'book3'});//var bookShelf = new BookShelf([book1, book2, book3]); //注意這裡面是數組,或者使用addvar bookShelf = new BookShelf;bookShelf.add(book1);bookShelf.add(book2);bookShelf.add(book3);bookShelf.remove(book3);//基於underscore這個js庫，還可以使用each的方法獲取collection中的數據bookShelf.each(function(book){alert(book.get('title'));});很簡單，不解釋
2、使用fetch從服務器端獲取數據
首先要在上面的的Bookshelf中定義url，注意collection中並沒有urlRoot這個屬性。或者你直接在fetch方法中定義url的值，如下：
bookShelf.fetch({url:'/getbooks/',success:function(collection,response){collection.each(function(book){alert(book.get('title'));});},error:function(){alert('error');}});其中也定義了兩個接受返回值的方法，具體含義我想很容易理解，返回正確格式的數據，就會調用success方法，錯誤格式的數據就會調用error方法，當然error方法也看添加和success方法一樣的形參。
對應的BookShelf的返回格式如下：[{'title':'book1'},{'title':'book2'}.....]
3、reset方法
這個方法的時候是要和上面的fetch進行配合的，collection在fetch到數據之後，會調用reset方法，所以你需要在collection中定義reset方法或者是綁定reset方法。這裡使用綁定演示：
bookShelf.bind('reset',showAllBooks);showAllBooks = function(){bookShelf.each(function(book){ //將book數據渲染到頁面。});}綁定的步驟要在fetch之前進行。
下面給出關於collection的完整代碼，需要服務器端支持才行，服務器端的搭建在後面會寫到。
<!DOCTYPE html><html><head> <title>the5fire-backbone-collection</title></head><body></body><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><script>(function ($) { //collection是一個簡單的models的有序集合//1、一個簡單的例子Book = Backbone.Model.extend({ defaults : { // 感謝網友藍色動力指正改為defaults title:'default' }, initialize: function(){ //alert('Hey, you create me!'); } }); BookShelf = Backbone.Collection.extend({ model : Book }); var book1 = new Book({title : 'book1'}); var book2 = new Book({title : 'book2'}); var book3 = new Book({title : 'book3'}); //var bookShelf = new BookShelf([book1, book2, book3]); //注意這裡面是數組,或者使用add var bookShelf = new BookShelf; bookShelf.add(book1); bookShelf.add(book2); bookShelf.add(book3); bookShelf.remove(book3); /* for(var i=0; i<bookShelf.models.length; i++) { alert(bookShelf.models[i].get('title')); } */ //基於underscore這個js庫，還可以使用each的方法獲取collection中的數據bookShelf.each(function(book){ alert(book.get('title')); }); //2、使用fetch從服務器端獲取數據,使用reset渲染bookShelf.bind('reset', showAllBooks); bookShelf.fetch({url:'/getbooks/',success:function(collection,response){ collection.each(function(book){ alert(book.get('title')); }); },error:function(){ alert('error'); }}); showAllBooks = function(){ bookShelf.each(function(book){ //將book數據渲染到頁面。 }); } //上述代碼僅僅均為可正常執行的代碼，不過關於服務器端的實例在後面會有。})(jQuery);</script></html>