前面有两篇文章介绍了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中的这些事件 下篇再接着写.........................