backbone教程.docxVIP

中文帮助文档/tools/backbone/backbone.js.html/blog/1391990backbone.js 初探什么是backbonebackbone不是脊椎骨，而是帮助开发重量级的javascript应用的框架。主要提供了3个东西：1、models(模型) 2、collections(集合) 3、views(视图)backbone.js文件本身很小，压缩后只有5.3KB，作为一个框架级别的核心JS文件，这个数字很可怕。除此之外，这个JS还必须依赖于另一个JS文件：underscore.js(包含许多工具方法，集合操作，js模板等等)。?简介用Backbone.Model表示应用中所有数据，models中的数据可以创建、校验、销毁和保存到服务端。当models中值被改变时自动触发一个change事件、所有用于展示models数据的views都会侦听到这个事件，然后进行重新渲染。Backbone.Collection和我们平时接触的JAVA集合类相似，具有增加元素，删除元素，获取长度，排序，比较等一系列工具方法，说白了就是一个保存models的集合类。Backbone.View中可以绑定dom el和客户端事件。页面中的html就是通过views的render方法渲染出来的，当新建一个view的时候通过要传进一个model作为数据，例如：?Js代码 ?javascript:void()var?view?=?new?EmployeeView({model:employee});???也就是说model就是以这种方式和view进行关联的。?特点创建models或者views的语法：extends，相当于类继承models的创建，销毁，校验等一系列改变都会触发相应的事件?示例需求：用backbone.js和jquery实现一个可编辑的员工信息表格。功能：1、录入员工信息。2、删除员工信息。3、双击表格可对员工信息进行修改。4、能对员工信息进行有效性校验。5、能对员工信息进行持久化。设计：用Employee类（继承自Backbone.Model）表示员工信息，包含ID、姓名、性别、年龄和职位字段。??Js代码 ?javascript:void()window.Employee?=?Backbone.Model.extend({?//?模型值校验?validate:function(attrs){?for(var?key?in?attrs){?if(attrs[key]?==?){?return?key?+?不能为空;?}?if(key?==?age??isNaN(attrs.age)){?return?年龄必须是数字;?}?}?}});??声明Employee类之后就可以新增一个Employee的示例对象了：?Js代码 ?javascript:void()var?employee?=?new?Employee();???Employee类中不必声明ID、姓名等业务字段。当需要给employee设置这些信息时候，只需要调用?Js代码 ?javascript:void()employee.set({id:1,name:Jason});??当然，如果需要对employee的信息进行校验，需要给Employee类配置一个validate方法，这个方法的参数attrs就是set进去的json数据。这样，当employee里面的数据每次发生改变的时候都会先调用这个validate方法。Model类定义好之后就可以开始定义集合类了，在集合类里面可以对里面的每个Model进行增加，删除等一系列操作，还可以调用fetch方法从server端获取集合的初始值。?Js代码 ?javascript:void()window.EmployeeList?=?Backbone.Collection.extend({?model?:?Employee,?//?持久化到本地数据库?localStorage:?new?Store(employees),?});window.Employees?=?new?EmployeeList();??设置 localStorage属性后Employees里面的数据自动会同步保存到本地数据库里面，每当调用Employees.fetch()后又会从localStorage里面恢复数据。View类主要负责一切和界面相关的工作，比如绑定html模板，绑定界面元素的事件，初始的渲染，模型值改变后的重新渲染和界面元素的销毁等：?Js代码 ?javascript:void()window.EmployeeView?=?Backbone.View.extend({?tagName?:?tr,?template?:?_.templat