实例学习Backbone.js（一）

前面有两篇文章介绍了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>
&nbsp;&nbsp;&nbsp;
<span id="pageIndex"></span>
&nbsp;&nbsp;&nbsp;
<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>
            &nbsp;
            <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中的这些事件 下篇再接着写.........................