转载

BackBone.js入门教程

废话不说，直入正题。

Backbone.js是什么

Backbone.js提供了一套web开发框架，通过 Models 进行key-value绑定及自定义事件处理，通过 Collections 提供一套丰富的API用于枚举功能，通过Views来进行事件处理及现有的Application通过RESTful JSON接口进行交互，它是基于 jQuery 和 underscore 的一个前端js框架。

Backbone中的重要概念

Model：根据现实数据建立的抽象，比如people
Collection：比如一群人
View：对Model和Collection中的数据进行展示，把数据渲染到页面上
Router：控制页面的路由

通过Backbone，你可以把你的数据当作Model，通过Model你可以创建数据，进行数据验证，销毁或者保存到服务器上。当界面上的操作引起model中属性的变化时，model会触发 change 的事件。那些用来显示model状态的views会接受到model触发change的消息，进而发出对应的响应，并且重新渲染新的数据到界面。在一个完整的Backbone应用中，你不需要写那些胶水代码来从DOM中通过特殊的id来获取节点，或者手工的更新HTML页面，因为在model发生变化时，views会很简单的进行自我更新。

感受一下

先上个例子感受一下：简易考勤打卡系统。

下面上代码：

<!DOCTYPE html> <html>  <head>   <script src="https://code.jquery.com/jquery-1.11.3.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width">   <title>JS Bin</title> </head>  <body>   <button id="check">请点击此处打卡</button>   <ul id="person-list"></ul> </body> <script>   (function($){ //       新建Model构造函数       var People=Backbone.Model.extend({         name:null,//姓名         ctime:null//打卡时间       }); //     新建Collection构造函数       var Peoples=Backbone.Collection.extend({         initialize:function(models,options){           this.bind("add",options.view.addOnePerson);//add将Model添加进Collection，在这里调用View中定义的addOnePerson函数         }       }); //     新建View构造函数       AppView=Backbone.View.extend({         el:$("body"),         initialize:function(){           this.peoples=new Peoples(null,{view:this})//实例化一个Collection         },         events:{           "click #check":"checkIn",//绑定#check的click事件，并执行checkIn函数         },         checkIn:function(){           var person_name=prompt("您的姓名是？");           if(person_name==""){             person_name="路人甲";           }           var ctime=new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds();           var person=new People({name:person_name,ctime:ctime});           this.peoples.add(person);         },         addOnePerson:function(model){           $("#person-list").append("<li>"+model.get('name')+"您好，您的打卡时间为："+model.get('ctime')+"</li>");         }     });     var appview=new AppView;//实例化一个View，自动执行initialize中的函数   })(jQuery) </script>  </html>

动手实践

本节从Model、Collection、View和Router四个部分分别讲解。

Model

对于Model这一部分，其官网是这么说的：“Model是js应用的核心，包括基础的数据以及围绕着这些数据的逻辑：数据转换、验证、属性计算和访问控制”。这句话基本上高度概括了Model在一个项目中的作用。实际上，不仅仅是js应用，在任何以数据收集和处理的项目中Model都是很重要的一块内容。

在web端，Model还有一个重要的功能就是和服务器端进行数据交互，就像是服务器端的程序需要和数据库交互一样。因此Model应该是携带数据流窜于各个模块之间的东西。

所以说，Ajax操作，应该写在Model层。

(function() {   var Man = Backbone.Model.extend({     defaults: {       name: "张三",       age: "38"     },     initialize: function() {       //初始化时绑定监听，change事件会先于validate发生       this.bind("change:name", function() {         var name = this.get("name");         alert("你改变了name的属性为：" + name);       });       this.bind("invalid", function(model, error) {         alert(error);       });     },     validate: function(attributes) {       if (attributes.name === '') {         return "name不能为空！";       }     },     aboutMe: function() {       return "我叫" + this.get("name") + ",今年" + this.get("age") + "岁";     }   });   var man = new Man();   alert(man.aboutMe());   man.set({     name: ''   });   man.save();//验证 })();