MVVM架构~使用boxy和knockoutjs实现编辑功能
这个功能我认为非常有用,尤其在后台管理系统中,它对用户来说,使用体验这块非常不错,下面是它的截图
说在前
在实现这个功能中,我们对knockout的基础知识一定要牢牢掌握,要知道,在knockout里一切都是对象,并且要知识knockout可以根据DIV进行绑定,对于验证这块,可以根据你的object进行验证,而并非只能验证全局对象,而对于boxy来说,
要知道它加载HTML代码的方式(如果HTML代码上有knockout绑定,则需要先将html代码加载上,然后再绑定model,这就用到了boxy的回调属性afterShow)
做在后
Html代码
<table class="listTbl"> <thead> <tr> <td width="100"></td> <td>ID</td> <td>姓名</td> <td>电子邮件</td> </tr> </thead> <tbody data-bind="foreach:UserList"> <tr> <td> <a href="javascript:;" data-bind="click:$parent.del">删除</a> <a href="javascript:;" data-bind="click:$parent.edit">编辑</a> </td> <td data-bind="text:UserInfoID"></td> <td data-bind="text:UserName"></td> <td data-bind="text:Email"></td> </tr> </tbody> </table> <script type="text/html" id="editUserDiv"> <form style="width: 500px;" id="editUser" data-bind="with:selectUser"> <div class="editor-label"> 账号: </div> <div class="editor-field"> <input type="hidden" name="UserInfoID" data-bind='value: UserInfoID' /> <input name="UserName" data-bind='value: UserName' /> </div> <div class="editor-label"> Email: </div> <div class="editor-field"> <input name="Email" data-bind='value: Email' /> </div> <div class="editor-label"> 手机: </div> <div class="editor-field"> <input name="Phone" data-bind='value: Phone' /> </div> <div class="editor-label"> 密码: </div> <div class="editor-field"> <input name="Password" data-bind='value: Password' /> </div> <div class="editor-label"> 真实姓名: </div> <div class="editor-field"> <input name="RealName" data-bind='value: RealName' /> </div> <div style="clear: both;"></div> <p> <input type="button" value="Save" data-bind="click:$parent.save" /> </p> </form> </script>
JS代码
<script type="text/ecmascript"> function toVal(obj) { if (typeof obj == "function") return obj(); else return obj; } var Model = function () { //properies var self = this; ko.validation.configure({//ko.validation相关配置 insertMessages: true//不自动插入错误消息 }); self.UserList = ko.observableArray(@Html.Raw(Json.Encode(Model))); self.selectUser = ko.observable(); //methods self.del = function (o) { Boxy.confirm("are you sure?", function () { $.post("/ef/DelAjaxPost?userinfoID=" + o.UserInfoID, function (data) { alert(data == true ? "成功" : "失败"); self.UserList.remove(o); }); }); } self.edit = function (o) { $(".boxy-wrapper").empty()//关闭之前的弹框 new Boxy($("#editUserDiv").html(), { afterShow: function () {//弹出框这前,绑定数据到弹框元素上 //属性验证 o.Phone = ko.observable(toVal(o.Phone)).extend({ required: true });/*先将要验证的字段变成ko对象,并添加扩展验证特性*/ o.Email = ko.observable(toVal(o.Email)).extend({ required: true }); o.RealName = ko.observable(toVal(o.RealName)).extend({ required: true }); o.Password = ko.observable(toVal(o.Password)).extend({ required: true }); o.UserName = ko.observable(toVal(o.UserName)).extend({ required: true }); //绑定对象到ko self.selectUser(o); //绑定对象到页面 ko.applyBindings(self, document.getElementById("editUser")); }, modal: true, title: "提示", closeText: "x" }); } self.save = function (o) { self.errors = ko.validation.group(o); if (o.isValid()) { $.post("/EF/EditAjaxPost", $("form").serialize()/*这个方法必须使input有name属性,只有id属性不行*/, function (data) { location.href = "/ef/userlist"; }); } else { self.errors.showAllMessages(); } } } var M = new Model(); ko.applyBindings(M); </script>
我们看在上面的代码,很简单,其实我也是找不少资料,因为开始做的时间出现了很多意想不到的问题,不过,庆幸的是,我还是把它解决了,呵呵.
欢迎大家和我一起去学习KnockoutJS,一起去讨论关于MVVM架构的一些想法!