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

返回目录

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

说在前

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

要知道它加载ＨＴＭＬ代码的方式（如果ＨＴＭＬ代码上有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架构的一些想法！

返回目录