标签：
前面有两篇文章介绍了Backbone的model、collection和view，那么接下来我想用一个完整的Demo来记录我学习的过程，
单页操作，实现数据的增删改，后台使用json做数据库，通过restful模式接口实现增删改操作
backbone的ajax发送的常用请求包括create、put、read、delete对应http的post、update、get、delete
接下来开始吧
服务端的实现就不介绍了，restful路由的定义如下
module.exports = {
get:{
"/": index.homepage, //主页
"/api/models/:size/:index": index.getModels //获取数据集，分页
},
post:{
"/api/model": index.insertModel //保存model
},
put:{
"/api/model/:id": index.updateModel //修改model
},
delete:{
"/api/model/:id": index.delModel //删除model
},
patch: {
"/api/model/:id": index.updateModel //修改model，在save的时候设置patch:true，则执行该路由
}
};
首先把页面html贴出来
长度：<input id="len" type="text" /> 数量：<input id="count" type="text" /> 批次：<input id="batch" type="text" /> 备注：<input id="remark" type="text" /> <input id="btnSave" type="button" value="save" /> <br /><br /></pre> <table class="listContent" style="border-bottom: 0px;" border="0" cellspacing="1" cellpadding="1"> <tbody> <tr> <td class="cbox-td" style="background-color: gainsboro;">选择</td> <td class="len-td" style="background-color: gainsboro;">总长度（mm）</td> <td class="useLen-td" style="background-color: gainsboro;">使用长度（mm）</td> <td class="lastLen-td" style="background-color: gainsboro;">剩余长度（mm）</td> <td class="flag-td" style="background-color: gainsboro;">是否有效</td> <td class="batch-td" style="background-color: gainsboro;">批次</td> <td class="remark-td" style="background-color: gainsboro;">备注</td> <td class="operate-edit" style="background-color: gainsboro;">修改</td> <td class="operate-del" style="background-color: gainsboro;">删除</td> </tr> </tbody> </table> <table id="listContent" class="listContent" style="margin-top: -1px;" border="0" cellspacing="1" cellpadding="1"></table> <pre> <a id="preBtn" href="http://www.cnblogs.com/javascript:;">上一页</a> <span id="pageIndex"></span> <a id="nextBtn" href="http://www.cnblogs.com/javascript:;">下一页</a> <script id="listContentTemplate" type="text/html"> <tr> <td class="cbox-td"> <input type="checkbox" class="check-len" lang="{id}"/> </td> <td class="len-td"> <label class="len-label">{len}</label> <input type="text" class="update-text" /> </td> <td class="useLen-td"> {useLen} </td> <td class="lastLen-td"> {lastLen} </td> <td class="flag-td"> {flag} </td> <td class="batch-td"> {batch} </td> <td class="remark-td"> {remark} </td> <td class="operate-edit"> <a href="javascript:;" class="li-update">修改</a> <a href="javascript:;" class="li-confirm" lang="{id}" style="display: none;">确定</a> <a href="javascript:;" class="li-cancel" style="display: none;">取消</a> </td> <td class="operate-del"> <a href="javascript:;" class="li-del" lang="{id}">删除</a> </td> </td> </script>
上面的html代码就不用分析了
有实现功能可看出Model包含长度、批次、备注、使用长度、剩余长度、是否可用等属性
首先我们做的就是定义Model对象，代码如下
var Model = Backbone.Model.extend({ urlRoot: "/api/model", initialize: function () { this.bind("change", function () { }); this.bind("invalid", function (model, error) { if (error) { alert(error); } }); }, defaults: { id: null, len: 0, useLen: 0, lastLen: 0, flag: true, batch:0, remark: "", createTime: Date.now() }, validate: function (attributes) { if (attributes.len <= 0 || attributes.len == "") { return "长度输入不合理"; } } });
代码分析：
首先看看urlRoot，model包括url和urlRoot两个用来与服务器进行通讯的路由地址，在model没有和Collection一块使用的时候则用url，若model和collection一块使用则使用urlRoot。
在initialize构造方法中绑定了两个方法，change：属性被改变时触发，invalid：验证属性时触发。
defaults：定义mode的属性
validate：验证字段的合法性
好咯model定义完成，但是我们要去数据集合，所有就要配合collection使用，下面定义一个Collection对象
var Models = Backbone.Collection.extend({
model: Model,
initialize: function () {}
});
代码分析：
很简单的一个Collection集合，用来保存model，通过model来指定使用的Model对象
initialize：同样是构造方法
这样Model就和Collection关联起来了，那么数据选择就要再view（视图）中完成了，
view的作用就是要完成所有页面执行事件，取数据集合、保存事件、修改事件、删除事件、分页事件等
那么接下来定义view
var ModelView = Backbone.View.extend({
el: $("body"), //控制模块
size: 30, //分页
index: 0, //页码
sumCount: 0, //
allowNext: true, //是否允许下一页执行
initialize: function () {
this.models = new Models();
this.uiList = $("#listContent");
this.render();
},
render: function () {
//初始化加载
},
events: {//绑定事件
"click #btnSave": "save",
"click .li-del": "del",
"click .li-update": "update",
"click .li-confirm": "confirmUpdate",
"click .li-cancel": "cancel",
"click #preBtn": "prePage",
"click #nextBtn": "nextPage"
},
save: function () {
//保存事件，保存的时候是没有id的，所有会执行Model中的urlRoot路由
},
del: function (event) {
//删除事件
},
update: function(event){
//修改，弹出确认框，真正修改在confirmUpdate方法中
},
confirmUpdate: function(event){
//真正修改，方法请求
},
initListContent: function (collection) {
//装载数据到页面
},
prePage: function(event){
//上一页
},
nextPage: function(event){
//下一页
},
setPageIndexToSpan: function(){
//显示当前页码
}
);
上面是View的定义，包括需要的事件定义，
后面会一一实现view中的这些事件 下篇再接着写.........................
标签：
原文地址：http://www.cnblogs.com/ajun/p/4684656.html
