backbone.js 初探[转]

什么是backbone

backbone不是脊椎骨，而是帮助开发重量级的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代码  

1. 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代码  

1. window.Employee = Backbone.Model.extend({  
2.     // 模型值校验  
3.     validate:function(attrs){  
4.         for(var key in attrs){  
5.             if(attrs[key] == ''){  
6.                 return key + "不能为空";  
7.             }  
8.             if(key == 'age' && isNaN(attrs.age)){  
9.                 return "年龄必须是数字";  
10.             }  
11.         }  
12.     }  
13. });  

声明Employee类之后就可以新增一个Employee的示例对象了：

 

Js代码  

1. var employee = new Employee();  

 

Employee类中不必声明ID、姓名等业务字段。当需要给employee设置这些信息时候，只需要调用

 

Js代码  

1. employee.set({'id':1,'name':'Jason'});  

 

当然，如果需要对employee的信息进行校验，需要给Employee类配置一个validate方法，这个方法的参数attrs就是set进去的json数据。这样，当employee里面的数据每次发生改变的时候都会先调用这个validate方法。

 

Model类定义好之后就可以开始定义集合类了，在集合类里面可以对里面的每个Model进行增加，删除等一系列操作，还可以调用fetch方法从server端获取集合的初始值。

 

Js代码  

1. window.EmployeeList = Backbone.Collection.extend({  
2.     model : Employee,  
3.     // 持久化到本地数据库  
4.     localStorage: new Store("employees"),  
5.       
6. });  
7. window.Employees = new EmployeeList();  

 

设置 localStorage属性后Employees里面的数据自动会同步保存到本地数据库里面，每当调用Employees.fetch()后又会从localStorage里面恢复数据。

 

View类主要负责一切和界面相关的工作，比如绑定html模板，绑定界面元素的事件，初始的渲染，模型值改变后的重新渲染和界面元素的销毁等：

 

Js代码  

1. window.EmployeeView = Backbone.View.extend({  
2.         tagName : 'tr',  
3.         template : _.template($('#item-template').html()),  
4.         events : {  
5.             "dblclick td" : "edit",  
6.             "blur input,select" : "close",  
7.             "click .del" : "clear",  
8.         },  
9.         initialize : function(){  
10.             // 每次更新模型后重新渲染  
11.             this.model.bind('change', this.render, this);  
12.             // 每次删除模型之后自动移除UI  
13.             this.model.bind('destroy', this.remove, this);  
14.         },  
15.         setText : function(){  
16.             var model = this.model;  
17.             this.input = $(this.el).find('input,select');   
18.             this.input.each(function(){  
19.                 var input = $(this);  
20.                 input.val(model.get(input.attr("name")));  
21.             });  
22.         },  
23.         close: function(e) {  
24.             var input = $(e.currentTarget);  
25.             var obj = {};  
26.             obj[input.attr('name')] = input.val();  
27.             this.model.save(obj);  
28.             $(e.currentTarget).parent().parent().removeClass("editing");  
29.         },  
30.         edit : function(e){  
31.             // 给td加上editing样式  
32.             $(e.currentTarget).addClass('editing').find('input,select').focus();  
33.         },  
34.         render: function() {  
35.             $(this.el).html(this.template(this.model.toJSON()));  
36.             // 把每个单元格的值赋予隐藏的输入框  
37.             this.setText();  
38.             return this;  
39.         },  
40.         remove: function() {  
41.             $(this.el).remove();  
42.         },  
43.         clear: function() {  
44.           this.model.destroy();  
45.         }  
46.     });  

 这个类里面的代码比较多，但主要和界面的渲染有关。一个EmployeeView对象对应table里面的一个tr元素。每次new一个EmployeeView对象的时候都会先调用initialize方法，这个方法里面绑定的事件确保了tr元素对应的model值每次发生改变或者被删除时都会同步到界面。也就是说当每次操作界面对数据进行修改后都是先把当前的变更保存到view绑定的model对象里面，然后model里面的事件机制会自动触发一个"change"事件对界面进行修改。

 

 

template中使用的方法_.template($('#item-template').html())是前面提到的underscore.js中提供一个工具方法，可以通过界面的HTML模板和一个JSON生成动态的HTML，说白了就是把JSON里面的值填充到HTML模板中对应的占位符里面去，牛X的是HTML模板里面支持一些常用的逻辑表达式如if,else,foreach等：

 

Html代码  

1.     
2. <%= eid %>  
3.   
4.     <%= username %>

  

    

  

  

  

    <%= sex=="1" ? "女":"男" %>

  

      

      

        男女  

      

    

  

  

  

    <%= age %>