《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>