《backbone.js》学习笔记
2014-12-01 15:28 臭小子1983 阅读(260) 评论(0) 编辑 收藏 举报第一章 理解Backbone
一、概念
Backbone.js是一套基于(模型-视图-控制器 MVC)模式的轻量级的javascript框架。
二、使用MVC模式设计应用
1、模型:应用程序运行所需要的数据和业务逻辑.
2、视图:负责把模型展示给用户.
3、控制器:负责响应用户的输入,更新模型和视图.
简单术语翻译对照:散列表(hash)、 模型(model)、 视图(view) 、集合(collection)、 回调函数(callback)、 绑定(bind)
三、下载和依赖
Backbone.js 唯一重度依赖 Underscore.js.
对于 RESTful , history 的支持依赖于 Backbone.Router ,
DOM 处理依赖于 Backbone.View , json2.js, 和 jQuery ( > 1.4.2) 或 Zepto 之一.
四、API参考
http://www.css88.com/doc/backbone/#Events-bind 中文文档
http://www.the5fire.com/the5fire-mobile-site-base-on-backbonejs.html 实例
第二章 模型
一、创建一个模型
模型负责存放应用于所需的数据、对数据进验证、执行访问控制以及实现所需特定的业务逻辑,可以通过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>
二、Model下的方法
1、extend():扩展Backbon.Model的方法
2、clone() 复制模型
var newModel = itemModel.clone();
3、isNew() :模型是否保存到了服务器中,如果模型无id视为新模型 itemMode.isNew();
4、change():手动触发change()事件
3、default:设置默认的属性值
1 var InvoiceItemModel = Backbone.Model.extend({ 2 default:{ 3 date: "", 4 description: "", 5 price: 0, 6 quantity: 1 7 } 8 })
4、attributes 属性:也是修改模型属性所用,建议使用set()方法
三、模型属性的操作
1、get()方法来获取属性的值
var quantity = itemModel.get("quantity"); // 如果不存在返回undefined
2、set()方法来更新、创建单个属性的值
1 itemModel.set("quantity", 5); // 单个更新,如果通过验证返回true,否则返回false 2 3 itemModel.set({ // 多个更新 4 quantity: 10, 5 price: 10 6 })
3、unset()删除模型中删除一个属性
itemModel.unset("quantity"); // 删除一个属性
4、clear()删除模型中所有的属性
itemModel.clear();
5、has()用来检查模型中是否有某一属性
if(!itemModel.has("quantity")){
console.log("模型中有此属性");
}
6、escape()获得HTML转义后的属性
var hacker = new Backbone.Model({
name : "<script>alert('xss')<\/script>"
})
var escaped_name = hacker.escape("name"); // 将转义成<script>alert('xss')</script>
7、url():返回模型资源在服务器上位置的相对 URL 。 如果模型放在其它地方,可通过合理的逻辑重载该方法
8、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())
四、模型的标识符操作
每个模型都有一个ID属性,来在不同杠间进行区分
1、设置id
itemModel.id = "model" + Math.random();
2、获取id
var modelId = itemModel.id;
第三章 集合
backbone用集合来管理多个模型
一、创建模型的集合
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>
第四章 视图
一、概念
视图对象主要用来渲染数据以产生html代码,一个视图可以绑定到DOM中的HTML元素.
二、渲染视图
当把数据显示给用户都需要用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>