《backbone.js》學習筆記

第一章  理解Backbone

1、概念

　　Backbone.js是一套基於（模型－視圖－控制器 MVC）模式的輕量級的javascript框架。

2、使用MVC模式設計應用

一、模型：應用程序運行所須要的數據和業務邏輯.

二、視圖：負責把模型展現給用戶.

三、控制器：負責響應用戶的輸入，更新模型和視圖.

簡單術語翻譯對照：散列表（hash）、 模型（model）、 視圖（view） 、集合（collection）、 回調函數（callback）、 綁定（bind）

 

3、下載和依賴

　　Backbone.js 惟一重度依賴 Underscore.js.

　　對於 RESTful , history 的支持依賴於 Backbone.Router ,

　　DOM 處理依賴於 Backbone.View , json2.js, 和 jQuery ( > 1.4.2) 或 Zepto 之一.

 

4、API參考

　　http://www.css88.com/doc/backbone/#Events-bind　　　　中文文檔

　　http://www.the5fire.com/the5fire-mobile-site-base-on-backbonejs.html　　　　實例

 

第二章  模型

1、建立一個模型

　　模型負責存放應用於所需的數據、對數據進驗證、執行訪問控制以及實現所需特定的業務邏輯，能夠經過Backbone.Model對象的方式來定義一個模型.

 1 <script>
 2     var sModel = Backbone.Model.extend({         // 建立一個模型
 3 
 4     })
 5 
 6     var newModel = new sModel({             // 實例化模型，並設置初始值
 7         lastNumber: "04,04,04",
 8         closeTime: "2014-12-01 15:52:09",
 9         "status": "55",
10         "issue": "141201037"
11     });
12 
13     $("#sidebar").html(newModel.get("lastNumber"));
14 </script>
15 
16 // 或者能夠寫成
17 
18 <script>
19     var sModel = Backbone.Model.extend({
20         default:{
21             lastNumber: "04,04,04",
22             closeTime: "2014-12-01 15:52:09",
23             "status": "55",
24             "issue": "141201037"
25         }
26     })
27     var newModel = new sModel();
28 
29     $("#sidebar").html(newModel.get("lastNumber"));
30 </script>

 

能夠將模版寫在<script>中

 1 <script type="text/template" id="post-list-template">
 2     <a href="#post/<%= id %>">
 3         <div class="line">
 4             <%= title %>
 5             <div class="row small-font">
 6                 <div class="span">分類:<%= category %></div>
 7                 <div class="span">發佈於:<%= create_time %></div>
 8             </div>
 9         </div>
10     </a>
11 </script>
12 
13 <script>
14     var PostView = Backbone.View.extend({
15         tagName:  "dl",
16         listTemplate: _.template($('#post-list-template').html())           // _.template方法是underscore.js框架中的方法
17     })
18 </script>

 

 

2、Model下的方法

一、extend()：擴展Backbon.Model的方法

二、clone() 複製模型

　　var newModel = itemModel.clone();

 

三、isNew() ：模型是否保存到了服務器中，若是模型無id視爲新模型 itemMode.isNew();

四、change()：手動觸發change()事件

三、default：設置默認的屬性值

1 var InvoiceItemModel = Backbone.Model.extend({
2     default:{
3         date: "",
4         description: "",
5         price: 0,
6         quantity: 1
7     }
8 })

 

四、attributes 屬性：也是修改模型屬性所用，建議使用set()方法

 

3、模型屬性的操做

一、get()方法來獲取屬性的值

　　var quantity = itemModel.get("quantity"); // 若是不存在返回undefined

 

二、set()方法來更新、建立單個屬性的值

1 itemModel.set("quantity", 5); // 單個更新，若是經過驗證返回true，不然返回false
2 
3 itemModel.set({ // 多個更新
4     quantity: 10,
5     price: 10
6 })

 

三、unset()刪除模型中刪除一個屬性

　　itemModel.unset("quantity"); // 刪除一個屬性

 

四、clear()刪除模型中全部的屬性

　　itemModel.clear();

 

五、has()用來檢查模型中是否有某一屬性

　　if(!itemModel.has("quantity")){
　　　　console.log("模型中有此屬性");
　　}

 

六、escape()得到HTML轉義後的屬性

var hacker = new Backbone.Model({
　　name : "<script>alert('xss')<\/script>"
})

var escaped_name = hacker.escape("name"); // 將轉義成&lt;script&gt;alert(&#x27;xss&#x27;)&lt;&#x2f;script&gt

 

七、url()：返回模型資源在服務器上位置的相對 URL 。 若是模型放在其它地方，可經過合理的邏輯重載該方法

 

八、urlRoot 集合外部的模型，經過指定 urlRoot 來設置生成基於模型 id 的 URLs 的默認 url 函數

1 var Book = Backbone.Model.extend({urlRoot : '/books'});
2 var solaris = new Book({id: "1083-lem-solaris"});
3 alert(solaris.url())

 

4、模型的標識符操做

每一個模型都有一個ID屬性，來在不一樣槓間進行區分

一、設置id

　　itemModel.id = "model" + Math.random();

 

二、獲取id

　　var modelId = itemModel.id;

 

第三章  集合

　　backbone用集合來管理多個模型

 

1、建立模型的集合

 1 <script>
 2 
 3     // 建立一個模型
 4     var InvoiceItemModel = Backbone.Model.extend({
 5         default: {
 6             descripion:"",
 7             price: 0,
 8             quantity: 1
 9         }
10     })
11 
12     // 方法一：經過模型對象的名來傳入
13     var Collection = Backbone.Collection.extend({
14         model: InvoiceItemModel
15     })
16 
17     // 方法二：建立一個新的集合，並傳入模型的初始化
18     var invoiceCollection = new InvoiceItemCollection([
19         {descripion:"Toy House", price: 22, quantity: 3},
20         {descripion:"Toy House1", price: 23, quantity: 4},
21         {descripion:"Toy House2", price: 24, quantity: 5},
22         {descripion:"Toy House3", price: 25, quantity: 6}
23     ])
24 </script>

 

  

第四章   視圖

1、概念

　　視圖對象主要用來渲染數據以產生html代碼，一個視圖能夠綁定到DOM中的HTML元素.

2、渲染視圖

　　當把數據顯示給用戶都須要用backbone的視圖來進行渲染。

 1 <script>
 2     // 建立一個視圖
 3     var v1 = Backbone.View.extend({
 4         el: "#box",
 5 
 6         // 初始化時調用視圖
 7         init: function(){
 8             this.html = "woodn toy house"
 9         },
10 
11         // 讀取視圖
12         render: function(){
13             $(this.el).html(this.html);
14         }
15     })
16 
17     // 實例化視圖
18     var oV1 = new v1();
19     oV1.init();
20 
21     // 讀取視圖
22     oV1.render();
23 </script>

 

讀取模版中的數據

 1 <script>
 2     var m1 = Backbone.Model.extend({
 3         descripion:"Toy House",
 4         price: 22,
 5         quantity: 3
 6     })
 7 
 8     var oM1 = new m1();
 9 
10     // 建立一個視圖
11     var v1 = Backbone.View.extend({
12         el: "#box",
13 
14         // 讀取視圖
15         render: function(){
16             $(this.el).html("hello " + oM1.descripion + " " + oM1.price + " " + oM1.quantity);
17         }
18     })
19 
20     // 實例化視圖
21     var oV1 = new v1();
22 
23     // 讀取視圖
24     oV1.render();
25 </script>