實例學習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中的這些事件 下篇再接着寫.........................