MVVM架(jia)構~knockoutjs與MVC配合,實現列(lie)表的增刪(shan)改(gai)功能
MVC與MVVM的模型
在MVC實(shi)例(li)項目中(zhong),為我(wo)們提(ti)供了(le)簡(jian)單的(de)(de)(de)(de)增(zeng)刪改(gai)查功(gong)能,而(er)這種功(gong)能的(de)(de)(de)(de)實(shi)現與(yu)具體(ti)的(de)(de)(de)(de)Model很有關(guan)系(xi),或(huo)者(zhe)說(shuo)(shuo)它(ta)與(yu)后臺(tai)數據庫(ku)的(de)(de)(de)(de)關(guan)系(xi)過于(yu)緊(jin)密了(le),而(er)對于(yu)開發人員來說(shuo)(shuo)當頁面(mian)布局修(xiu)改(gai)后,也會現時修(xiu)改(gai)它(ta)們的(de)(de)(de)(de)Model部(bu)分,而(er)對于(yu)MVVM思想體(ti)系(xi)來說(shuo)(shuo),它(ta)可以不去修(xiu)改(gai)后臺(tai)Model,而(er)后采用了(le)一種前臺(tai)綁(bang)定的(de)(de)(de)(de)方(fang)式(shi),很好的(de)(de)(de)(de)實(shi)現了(le)前臺(tai)模塊與(yu)后臺(tai)Model的(de)(de)(de)(de)解耦!
實例代碼
本實例主要展現(xian)(xian)了(le)一(yi)個(ge)簡單的(de)(de)(de)列表操作(zuo),包括了(le)添加,刪除和修(xiu)改,在(zai)使用knockoutjs實現(xian)(xian)它(ta)之后,使它(ta)的(de)(de)(de)用戶體驗提升了(le)一(yi)個(ge)臺階,對于代碼的(de)(de)(de)分層有了(le)一(yi)個(ge)新(xin)的(de)(de)(de)升華!
C#核心代碼
public ActionResult Index() { return View(new List<Product> { new Product{ID=1,Name="test1"}, new Product{ID=2,Name="test2"}, new Product{ID=3,Name="test3"}, new Product{ID=4,Name="test4"}, new Product{ID=5,Name="test5"}, new Product{ID=6,Name="test6"}, }); }
JS核心代碼
var People = function () { this.ID = 0; this.Name = ""; } var model = function () { self = this; self.PeopleList = ko.observableArray(@Html.Raw(Json.Encode(Model))); self.remove = function (o) { self.PeopleList.remove(o); }; self.selectItem = ko.observable(); self.editing = ko.observable(false); self.add = function (o) { self.editing(true); self.selectItem(new People()); } self.edit = function (o) { self.editing(true); self.selectItem(o); } self.selectItem.subscribe(function (o) { // alert("要編輯記(ji)錄ID是" + o.ID); }); self.save = function (o) { alert((o.ID > 0 ? "修改數據" : "新建數據") + o.Name); } self.cancle = function () { self.editing(false); } }
HTML核心代碼
<h3> <a href="javascript:void(0)" data-bind="click:add">添加實體</a></h3> <table> <thead> <tr> <th>編號</th> <th>姓名</th> <th></th> </tr> </thead> <tbody data-bind="template:{name:'list',foreach: PeopleList}"> </tbody> </table> <script type="text/html" id="list"> <tr> <td><span data-bind="text:ID"></span></td> <td><span data-bind="text:Name"></span> </td> <td><a href="javascript:void(0)" data-bind="click:$parent.remove">刪除</a> <a href="javascript:void(0)" data-bind="click:$parent.edit">編輯</a> </td> </tr> </script> <fieldset data-bind="with:selectItem,visible:editing"> <legend>正在<span data-bind="if:ID==0">新建</span><span data-bind="if:ID>0">編輯</span></legend> 姓(xing)名: <input type="text" data-bind="value:Name" /> <input type="button" data-bind="click:$parent.save" value="保存" /> <input type="button" data-bind="click:$parent.cancle" value="取消" /> </fieldset>
運行效果圖:
$.when實現方法回調
下面介紹JQ里(li)的一個小(xiao)功能(neng),$.when($.ajax({})).done().done()....,它可(ke)以方便的實(shi)現方法的回調(diao),done()代(dai)碼塊相(xiang)關于ajax里(li)的success節(jie)(jie)點里(li)的內容,將代(dai)碼從success節(jie)(jie)點拿出來(lai),放到(dao)done()里(li),它可(ke)以使(shi)代(dai)碼的層次感和可(ke)能(neng)性更強!
$.when($.ajax({ url: "/home/getProduct", dataType: "JSON", type: "GET", success: function (data) { alert(JSON.stringify(data)); } })).done(function () { alert("哈哈,回調成功了!"); }) .done(function () { ko.applyBindings(new model()); });