首页 > 代码库 > MVVM架构~使用boxy和knockoutjs实现编辑功能
MVVM架构~使用boxy和knockoutjs实现编辑功能
这个功能我认为非常有用,尤其在后台管理系统中,它对用户来说,使用体验这块非常不错,下面是它的截图
说在前
在实现这个功能中,我们对knockout的基础知识一定要牢牢掌握,要知道,在knockout里一切都是对象,并且要知识knockout可以根据DIV进行绑定,对于验证这块,可以根据你的object进行验证,而并非只能验证全局对象,而对于boxy来说,
要知道它加载HTML代码的方式(如果HTML代码上有knockout绑定,则需要先将html代码加载上,然后再绑定model,这就用到了boxy的回调属性afterShow)
做在后
Html代码
- <tableclass="listTbl">
- <thead>
- <tr>
- <tdwidth="100"></td>
- <td>ID</td>
- <td>姓名</td>
- <td>电子邮件</td>
- </tr>
- </thead>
- <tbodydata-bind="foreach:UserList">
- <tr>
- <td>
- <ahref="javascript:;"data-bind="click:$parent.del">删除</a>
- <ahref="javascript:;"data-bind="click:$parent.edit">编辑</a>
- </td>
- <tddata-bind="text:UserInfoID"></td>
- <tddata-bind="text:UserName"></td>
- <tddata-bind="text:Email"></td>
- </tr>
- </tbody>
- </table>
- <scripttype="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代码
- <scripttype="text/ecmascript">
- function toVal(obj){
- if(typeof obj =="function")
- return obj();
- else
- return obj;
- }
- varModel=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()//关闭之前的弹框
- newBoxy($("#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 =newModel();
- ko.applyBindings(M);
- </script>
我们看在上面的代码,很简单,其实我也是找不少资料,因为开始做的时间出现了很多意想不到的问题,不过,庆幸的是,我还是把它解决了,呵呵.
欢迎大家和我一起去学习KnockoutJS,一起去讨论关于MVVM架构的一些想法!
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。