backbone.js 初探[转]

标签: backbone js | 发表时间:2013-12-16 18:04 | 作者:jsczxy2
出处:http://www.iteye.com

什么是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.   <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>  

   

setText方法主要负责把model里面的数据设置到每个tr里面的隐藏输入域里面。

 

close方法被绑定到了input和select元素的blur事件中。当用户对单元格数据进行修改后都会把鼠标点击到界面其他地方然后输入框会自动隐藏并且把修改的数据显示在表格上面。close方法首先从当前被编辑的元素中拿到最新值,然后封装成一个对象,调用model的save方法后首先执行model的validate方法,如果校验通过则保存到本地存储并触发"change"事件。

 

最后还需要一个主界面View,这个View主要绑定了界面中的录入表单的“增加”按钮事件,Employees的相关事件以及页面初始化时从本地存储中恢复数据:

 

Js代码   收藏代码
  1. window.AppView = Backbone.View.extend({  
  2.         el : $("#app"),  
  3.         events : {  
  4.             "click .#add-btn" : "createOnEnter"  
  5.         },  
  6.         // 绑定collection的相关事件  
  7.         initialize: function() {  
  8.             Employees.bind('add', this.addOne, this);  
  9.             // 调用fetch的时候触发reset  
  10.             Employees.bind('reset', this.addAll, this);  
  11.             Employees.fetch();  
  12.         },  
  13.         createOnEnter : function(e) {  
  14.             var employee = new Employee();  
  15.             var attr = {};  
  16.             $('#emp-form input,#emp-form select').each(function(){  
  17.                 var input = $(this);  
  18.                 attr[input.attr('name')] = input.val();  
  19.             });  
  20.             employee.bind('error',function(model,error){  
  21.                 alert(error);  
  22.             });  
  23.             // set方法中会自动调用model的validate方法进行校验,如果不通过则返回false  
  24.             if(employee.set(attr)){  
  25.                 Employees.create(employee);  
  26.             }  
  27.         },  
  28.         addOne : function(employee){  
  29.             employee.set({"eid":employee.get("eid")||Employees.length});  
  30.             employee.bind('error',function(model,error){  
  31.                 alert(error);  
  32.             });  
  33.             var view = new EmployeeView({model:employee});  
  34.             $(".emp-table tbody").append(view.render().el);  
  35.         },  
  36.         addAll : function(){  
  37.             Employees.each(this.addOne);  
  38.         }  
  39.     });  

 initialize方法中绑定了Employees的add和reset事件,也就是说每当往Employees中添加一个model的时候都会调用AppView的addOne方法,这个方法主要绑定了model的error事件以及把EmployeeView生成的html插入到界面中的合适位置。

 

OK,万事俱备,只欠启动,整个应用的初始化方法就是AppView的initialize方法,因此只需要新建一个AppView就可以了:

 

Js代码   收藏代码
  1. window.App = new AppView();  

 

 

整个示例的JS代码很少,加上注释只有100行左右,感兴趣的可以下载看看。由于示例使用到了本地存储,所以不要用IE运行示例,你懂的





已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [backbone js] 推荐:

backbone 之事件(events)

- - 博客园_首页
  最近用 backbone 做了一个项目,加深了对前端mvc理解. 一定要应用的熟练后,了解其思想后,再去阅读源码. 想写写自己对backbone的感悟. 接下来第一步就是backbone的event.   backbone的event 是其核心.  当我们user调用create 就会触发change事件.

通过helloworld来认识下backbone - Ruthless

- - 博客园_Ruthless
Backbone主要涉及3部分:model,collection和view. 而这个框架的优势在于:数据与视图分离,通过操作model来自动更新view. 根据我的个人经验,直接写个简单的例子是最最直观的,那么从hello world开始吧. 程序目标:创建人员,将人员添加入队伍,删除人员,清空队列.

DNSPod国内版全新亮相:前端使用Backbone技术

- - cnBeta.COM
国内最大第三方DNS解析服务商DNSPod国内新版于2012年元旦正式上线公测. 前端大胆使用Backbone.js框架,旨在为用户提供优质客户体验. DNSPod此次改版前端使用了Backbone.js,Seajs以及Mustache等先进技术. 其中Backbone的使用最为大胆,它是结合jQuery来构建复杂的 Web 前端交互应用.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了,但講了大概又會被戰. 相較於英文維基百科,中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的,而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識,而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識,所以有自覺的百科編輯者反而是少數;中文維基只好長成現在這個樣子了.

Js删除节点

- - JavaScript - Web前端 - ITeye博客
 方式一:传this参数调用方法:.  方式二:js方法中通过选择器获取节点:. //此处删除的是a节点 }. 方式三:通过jQuery方式获取节点:(尚未测试,有待测试. 此处a标签传this到js中,js通过this(即a节点)取parent(即p节点). (1)p.remove();可直接删除整个p节点.

JS游戏引擎列表

- sku - 酷壳 - CoolShell.cn
这里有一个网址收集了关于JS游戏引擎开发库的一个列表,转过来. 关于使用JS和HTML5做的一些小游戏,可参见《HTML5 小游戏展示》. Name Latest Release License Type Notes The Render Engine 1.5.3 MIT 跨浏览器; 大规模 API; 开源. 2 gameQuery 0.5.1 CC BY-SA 2.5 和 jQuery 一起使用 gTile 0.0.1 Tile based.

Deck JS: HTML5 幻灯片

- L - LinuxTOY
Deck.js 是一组开源的 JavaScript 类库,方便使用现代的 HTML5/CSS3/JS 技术创建幻灯片. 该软件十分适用于开源项目介绍,交互式的方式比单纯的文字说明更简洁易懂. 不废话了,赶紧前往该项目主页去体验 HTML5 时代的幻灯片吧. 分类: Productivity |. 收藏到 del.icio.us |.

JS三维模型库 Three.js

- Le - 开源中国社区最新软件
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象. 你可以在它的主页上看到许多精采的演示. 不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏) 演示:http://mrdoob.github.com/three.js/.