返回目錄

這個例子我做了幾次，之前總是有BUG，目前測試后，確定沒有BUG才發(fā)上來的，主要功能是實現(xiàn)“我的銀行”模塊的增刪改的功能，這個里面包括了級聯(lián)列表的區(qū)域選擇，這部分是難點，在開發(fā)過程中，我們應(yīng)該知道一個概念，在knockoutjs里，如果你的select被綁定了optionsValue屬性，那么它將存儲這個普通的字符，而如果你沒有設(shè)置optionsValue，那么它存儲的是JS對象。

Html代碼

<script src="/Scripts/areaData.js"></script><div id="bankDiv"><div data-bind="foreach:bankList"><ul style="float: left;"><li><b>銀行開戶名：</b><span data-bind="text:BankAccountName"></span></li><li><b>開戶行所在城市：</b><select disabled="disabled" data-bind=" options: areaData,optionsText: 'Name',value:Province,optionsCaption: '選擇省份'"></select><span data-bind="with:Province"><select disabled="disabled" data-bind=" visible:$parent.Province,options: Sons,optionsText: 'Name',value:$parent.City,optionsCaption: '選擇城市'"></select></span><span data-bind="with:City"><select disabled="disabled" data-bind=" visible:$parent.City,options: Sons,optionsText: 'Name',value:$parent.District,optionsCaption: '選擇區(qū)縣'"></select></span></li><li><b>銀行名稱：</b><span data-bind="text:BankName"></span></li><li><b>支行名稱：</b><span data-bind="text:BankAddress"></span></li><li><b>銀行賬號：</b><span data-bind="text:BankAccountNumber"></span></li><li><a href="javascript:;" data-bind="click:$parent.removeLine">刪除</a>&nbsp;&nbsp;<a href="javascript:;" data-bind="click:$parent.edit">編輯</a></li></ul></div><div style="clear: both;"><a href="javascript:;" data-bind="click:add">添加銀行</a></div><div data-bind="with:selectItem,visible:editing()"><ul><li><b>正在<span data-bind="if:UserBankID==0">新建</span><span data-bind="if:UserBankID>0">編輯</span>銀行</b></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;銀行開戶名：<input type="text" data-bind="value:BankAccountName" /></li><li>開戶行所在城市：<select data-bind=" options: areaData,optionsText: 'Name',value:Province,optionsCaption: '選擇省份'"></select><span data-bind="with:Province"><select data-bind=" visible:$parent.Province,options: Sons,optionsText: 'Name',value:$parent.City,optionsCaption: '選擇城市'"></select></span><span data-bind="with:City"><select data-bind=" visible:$parent.City,options: Sons,optionsText: 'Name',value:$parent.District,optionsCaption: '選擇區(qū)縣'"></select></span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;銀行名稱：<input type="text" data-bind="value:BankName" /></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;支行名稱：<input type="text" data-bind="value:BankAddress" /></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;銀行賬號：<input type="text" data-bind="value:BankAccountNumber" /></li></ul><input type="button" data-bind="click:$parent.save" value="保存" /><input type="button" data-bind="click:$parent.cancle" value="取消" /></div> </div>

JS代碼,注意，為了測試方便，我將AJAX與數(shù)據(jù)交換的代碼全都注釋了

<script type="text/ecmascript">//銀行實體可以從數(shù)據(jù)庫中讀出來的,所以不存儲ko對象var BankEntity = function (UserBankID,Province,City,District,BankName,BankAccountName,BankAccountNumber,BankAddress,IsAdd) {this.UserBankID = UserBankID;this.Province = Province;this.City = City;this.District = District;this.BankName = BankName;this.BankAccountName = BankAccountName;this.BankAccountNumber = BankAccountNumber;this.BankAddress = BankAddress;this.IsAdd = IsAdd;}//銀行對象var Bank = function (UserBankID,Province,City,District,BankName,BankAccountName,BankAccountNumber,BankAddress,IsAdd) {this.UserBankID = UserBankID;this.Province = ko.observable(Province);this.City = ko.observable(City);this.District = ko.observable(District);this.BankName = BankName;this.BankAccountName = BankAccountName;this.BankAccountNumber = BankAccountNumber;this.BankAddress = BankAddress;this.IsAdd = IsAdd;}//我的銀行操作var bankEditor = function () {var self = this;var dataArr = [];dataArr.push(new BankEntity(1, "北京市", "市轄區(qū)", "石景山區(qū)", "bank", "user", "110", "beijing"));dataArr.push(new BankEntity(2, "安徽省", "安慶市", "大觀區(qū)", "bank2", "user2", "110", "beijing"));var selDataArr = [];var p, c, d;for (var data in dataArr) {for (var i in areaData) {if (areaData[i].Name == dataArr[data].Province) {for (var j in areaData[i].Sons) {if (areaData[i].Sons[j].Name == dataArr[data].City) {for (var k in areaData[i].Sons[j].Sons) {if (areaData[i].Sons[j].Sons[k].Name == dataArr[data].District) {selDataArr.push(new Bank( dataArr[data].UserBankID, areaData[i],areaData[i].Sons[j],areaData[i].Sons[j].Sons[k],dataArr[data].BankName,dataArr[data].BankAccountName,dataArr[data].BankAccountNumber,dataArr[data].BankAddress,false));break;}}}}}}}self.bankList = ko.observableArray(selDataArr);self.selectItem = ko.observable();self.editing = ko.observable(false);//移除同時提交self.removeLine = function (o) {self.bankList.remove(o);}//添加self.add = function () {self.editing(true);self.selectItem(new Bank(0, "", "", "", "銀行名稱", "開戶名", "賬號", "支行名稱", true));};//編輯self.edit = function (o) {self.editing(true);self.bankList.remove(o)//將上面的實體移除o.IsAdd = false;self.selectItem(o);};//postself.save = function (o) {/*數(shù)據(jù)傳遞時，使用字符串或者數(shù)值，而在knockoutjs顯示時，使用完整對象*/if (o.Province() == undefined || o.City() == undefined || o.District() == undefined) {alert("請選擇區(qū)域信息");return false;}self.editing(false);/*地域顯示為文本*/self.bankList.push(o);//將編輯后的實體添加 };self.cancle = function (o) {if (!o.IsAdd)self.bankList.push(o);self.editing(false);};}var bankModel = new bankEditor()ko.applyBindings(bankModel, document.getElementById("bankDiv"));</script>

截圖如下

返回目錄

總結(jié)

以上是生活随笔為你收集整理的MVVM架构~knockoutjs系列之包括区域级联列表的增删改的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。