当我们开发含有大量Javascript的web应用程序时，首先你需要做的事情之一便是停止向DOM对象附加数据。 通过复杂多变的jQuery选择符和回调函数创建Javascript应用程序，包括在HTML UI，Javascript逻辑和数据之间保持同步，都不复杂。 但对富客户端应用来说，良好的架构通常是有很多益处的。
Backbone将数据呈现为model, 你可以创建模型、对模型进行验证和销毁，甚至将它保存到服务器。 当UI的变化引起模型属性改变时，模型会触发"change"事件； 所有显示模型数据的视图会接收到该事件的通知，继而视图重新渲染。 你无需查找DOM来搜索指定id的元素去手动更新HTML。 — 当模型改变了，视图便会自动变化。
主要组成：
1.model：创建数据，进行数据验证，销毁或者保存到服务器上；
创建一个模型： var student= Backbone.Model.extend({
defaults:{ //。。。模型默认的属性
id:1,
pkid:0,
name:‘‘,
age:0
},
urlRoot : ‘/info‘ //......到后台的URL路劲
});
2.collection：可以增加元素，删除元素，获取长度，排序，比较等一系列工具方法，说白了就是一个保存 models的集合类
创建几个集合： var liststudent = Backbone.Collection.extend({
model:student //..........model后跟你所需保存模型名
});
重要方法：
1.fetch方法
从服务器拉取集合的默认模型，成功接收数据后会重置（reset）集合。 options 支持 success 和 error 回调函数，回调函数接收 (collection, response) 作为参数。 可以委托 Backbone.sync 在随后处理个性化需求。 处理 fetch 请求的服务器应当返回模型的 JSON 数组。
2.save方法
通过委托 Backbone.sync 保存模型到数据库（或可替代的持久层）。 attributes 散 列表 (在 set) 应当包含想要改变的属性，不涉及的键不会被修改。 如果模型含有 validate 方法，并且验证失败，模型不会保存。 如果模型 isNew, 保存将采用 "create" (HTTP POST) 方法, 如果模型已经在服务器存在，保存将采用 "update" (HTTP PUT) 方法.
3destroy方法
通过委托 HTTP DELETE 请求到 Backbone.sync 销毁服务器上的模型. 接受 success 和 error 回调函数作为选项散列表参数。 将在模型上触发 "destroy" 事件，该事件可以通过任意包含它的集合向上冒泡。
实例：对表格进行增删
HTML代码：
<input type="text"><input type="text">
<button id=‘add‘>添加</button>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody id="main">
<tr>
<td></td>
<td></td>
<td></td>
<td><a href="#">删除</a> </td>
</tr>
</tbody>
</table>
JS代码：
<script type="text/javascript">
var studentm = Backbone.Model.extend({ //创建一个模型
urlRoot:‘/info‘ //集合外部的模型，通过指定 urlRoot 来设置生成基于模型 id 的 URLs 的默认 url 函数。
});
var list = Backbone.Collection.extend({ //将studentm模型放到集合中
model:studentm,
url:‘/info‘ }); // url 属性（或函数）以指定集合对应的服务器位置。集合内的模型使用 url 构造自身的 URLs
var stulist = new list();
function queryall(){ //查询
stulist.fetch({success:function(m,r){ //fetch方法
var str ="";
m.each(function(i，n){
str+="<tr><td>" + i.get("id")+
"</td><td>" +i.get("s_name")+
"</td><td>" +i.get("s_age")+
"</td><td><a href=‘javascript:del("+n+")‘>删除</a></td></tr>";
});
$(‘#main‘).html(str);
}}); }
queryall();
$(‘#add‘).on(‘click‘,function(){
var inpuobj = $(‘input[type=text]‘);
var finp = inpuobj[0].value;
var sinp = inpuobj[1].value;
var temp = new studentm();
temp.save({name:finp,age:sinp},{success:function(){ //save方法
queryall();
}}); });
/** * 删除 */
function del(i){
stulist.at(i).destroy({ //。。。。。。。。。destroy方法
success:function(){
queryall();
} });// 第一个发出请求，第二个消除集合中的自己（对象）; }
</script>