MVVM架构~使用boxy和knockoutjs实现编辑功能

这个功能我认为非常有用，尤其在后台管理系统中，它对用户来说，使用体验这块非常不错，下面是它的截图

说在前

在实现这个功能中，我们对knockout的基础知识一定要牢牢掌握，要知道，在knockout里一切都是对象，并且要知识knockout可以根据ＤＩＶ进行绑定，对于验证这块，可以根据你的object进行验证，而并非只能验证全局对象，而对于boxy来说，

要知道它加载ＨＴＭＬ代码的方式（如果ＨＴＭＬ代码上有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=" 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>

JS代码

 

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);

我们看在上面的代码，很简单，其实我也是找不少资料，因为开始做的时间出现了很多意想不到的问题，不过，庆幸的是，我还是把它解决了，呵呵．

欢迎大家和我一起去学习KnockoutJS，一起去讨论关于MVVM架构的一些想法！