首页 > 代码库 > MVVM架构~使用boxy和knockoutjs实现编辑功能

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

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

说在前

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

要知道它加载HTML代码的方式(如果HTML代码上有knockout绑定,则需要先将html代码加载上,然后再绑定model,这就用到了boxy的回调属性afterShow)

做在后

Html代码

  1. <tableclass="listTbl">
  2. <thead>
  3. <tr>
  4. <tdwidth="100"></td>
  5. <td>ID</td>
  6. <td>姓名</td>
  7. <td>电子邮件</td>
  8. </tr>
  9. </thead>
  10. <tbodydata-bind="foreach:UserList">
  11. <tr>
  12. <td>
  13. <ahref="javascript:;"data-bind="click:$parent.del">删除</a>
  14. <ahref="javascript:;"data-bind="click:$parent.edit">编辑</a>
  15. </td>
  16. <tddata-bind="text:UserInfoID"></td>
  17. <tddata-bind="text:UserName"></td>
  18. <tddata-bind="text:Email"></td>
  19. </tr>
  20. </tbody>
  21. </table>
  22. <scripttype="text/html"id="editUserDiv">
  23. <form style="width: 500px;" id="editUser" data-bind="with:selectUser">
  24. <div class="editor-label">
  25. 账号:
  26. </div>
  27. <div class="editor-field">
  28. <input type="hidden" name="UserInfoID" data-bind=value: UserInfoID/>
  29. <input name="UserName" data-bind=value: UserName/>
  30. </div>
  31. <div class="editor-label">
  32. Email:
  33. </div>
  34. <div class="editor-field">
  35. <input name="Email" data-bind=value: Email/>
  36. </div>
  37. <div class="editor-label">
  38. 手机:
  39. </div>
  40. <div class="editor-field">
  41. <input name="Phone" data-bind=value: Phone/>
  42. </div>
  43. <div class="editor-label">
  44. 密码:
  45. </div>
  46. <div class="editor-field">
  47. <input name="Password" data-bind=value: Password/>
  48. </div>
  49. <div class="editor-label">
  50. 真实姓名:
  51. </div>
  52. <div class="editor-field">
  53. <input name="RealName" data-bind=value: RealName/>
  54. </div>
  55.  
  56. <div style="clear: both;"></div>
  57.  
  58. <p>
  59. <input type="button" value="Save" data-bind="click:$parent.save"/>
  60. </p>
  61. </form>
  62. </script>

JS代码

  1. <scripttype="text/ecmascript">
  2. function toVal(obj){
  3. if(typeof obj =="function")
  4. return obj();
  5. else
  6. return obj;
  7. }
  8. varModel=function(){
  9. //properies
  10. var self =this;
  11. ko.validation.configure({//ko.validation相关配置
  12. insertMessages:true//不自动插入错误消息
  13. });
  14. self.UserList= ko.observableArray(@Html.Raw(Json.Encode(Model)));
  15. self.selectUser = ko.observable();
  16. //methods
  17. self.del =function(o){
  18. Boxy.confirm("are you sure?",function(){
  19. $.post("/ef/DelAjaxPost?userinfoID="+ o.UserInfoID,function(data){
  20. alert(data ==true?"成功":"失败");
  21. self.UserList.remove(o);
  22. });
  23. });
  24. }
  25. self.edit =function(o){
  26. $(".boxy-wrapper").empty()//关闭之前的弹框
  27. newBoxy($("#editUserDiv").html(),{
  28. afterShow:function(){//弹出框这前,绑定数据到弹框元素上
  29. //属性验证
  30. o.Phone= ko.observable(toVal(o.Phone)).extend({ required:true});/*先将要验证的字段变成ko对象,并添加扩展验证特性*/
  31. o.Email= ko.observable(toVal(o.Email)).extend({ required:true});
  32. o.RealName= ko.observable(toVal(o.RealName)).extend({ required:true});
  33. o.Password= ko.observable(toVal(o.Password)).extend({ required:true});
  34. o.UserName= ko.observable(toVal(o.UserName)).extend({ required:true});
  35. //绑定对象到ko
  36. self.selectUser(o);
  37. //绑定对象到页面
  38. ko.applyBindings(self, document.getElementById("editUser"));
  39. }, modal:true, title:"提示", closeText:"x"
  40. });
  41. }
  42. self.save =function(o){
  43. self.errors = ko.validation.group(o);
  44. if(o.isValid()){
  45. $.post("/EF/EditAjaxPost", $("form").serialize()/*这个方法必须使input有name属性,只有id属性不行*/,function(data){
  46. location.href ="/ef/userlist";
  47. });
  48. }else{
  49. self.errors.showAllMessages();
  50. }
  51. }
  52. }
  53. var M =newModel();
  54. ko.applyBindings(M);
  55. </script>

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

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