示例

需求：用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.   <script type="text/template" id="item-template">  
  2. <td><%= eid %></td>  
  3. <td class="username">  
  4.     <div class="display"><%= username %></div>  
  5.     <div class="edit"><input class="username" name="username"></input></div>  
  6. </td>  
  7. <td class="sex">  
  8.     <div class="display"><%= sex=="1" ? "女":"男" %></div>  
  9.     <div class="edit">  
  10.     <select name="sex" class="sex" style="width:45px">  
  11.         <option value="0">男</option><option value="1">女</option>  
  12.     </select>  
  13.     </div>  
  14. </td>  
  15. <td class="age">  
  16.     <div class="display"><%= age %></div>  
  17.     <div class="edit">  
  18.         <input class="age" name="age"></input>  
  19.     </div>  
  20. </td>  
  21. <td class="position">  
  22.     <div class="display"><%= position %></div>  
  23.     <div class="edit">  
  24.         <input class="position" name="position"></input>  
  25.     </div>  
  26. </td>  
  27. <td>  
  28.     <a href="#" class="del">删除</a>  
  29. </td>  
  30.     </script>