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架构的一些想法!

本文转自博客园张占岭(仓储大叔)的博客,原文链接:MVVM架构~使用boxy和knockoutjs实现编辑功能,如需转载请自行联系原博主。

目录
相关文章
|
29天前
|
前端开发 测试技术 数据处理
Kotlin教程笔记 - MVP与MVVM架构设计的对比
Kotlin教程笔记 - MVP与MVVM架构设计的对比
49 4
|
29天前
|
存储 前端开发 Java
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
26 2
|
1月前
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
Kotlin教程笔记(80) - MVVM架构设计
|
1月前
|
前端开发 JavaScript 测试技术
android做中大型项目完美的架构模式是什么?是MVVM吗?如果不是,是什么?
在 Android 开发中,选择合适的架构模式对于构建中大型项目至关重要。常见的架构模式有 MVVM、MVP、MVI、Clean Architecture 和 Flux/Redux。每种模式都有其优缺点和适用场景,例如 MVVM 适用于复杂 UI 状态和频繁更新,而 Clean Architecture 适合大型项目和多平台开发。选择合适的架构应考虑项目需求、团队熟悉度和可维护性。
53 6
|
23天前
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
Kotlin教程笔记(80) - MVVM架构设计
|
26天前
|
机器学习/深度学习 存储 人工智能
政务部门人工智能OCR智能化升级:3大技术架构与4项核心功能解析
本项目针对政务服务数字化需求,建设智能文档处理平台,利用OCR、信息抽取和深度学习技术,实现文件自动解析、分类、比对与审核,提升效率与准确性。平台强调本地部署,确保数据安全,解决低质量扫描件、复杂表格等痛点,降低人工成本与错误率,助力智慧政务发展。
|
1月前
|
前端开发 Java 测试技术
android MVP契约类架构模式与MVVM架构模式,哪种架构模式更好?
android MVP契约类架构模式与MVVM架构模式,哪种架构模式更好?
49 0
|
16天前
|
弹性计算 API 持续交付
后端服务架构的微服务化转型
本文旨在探讨后端服务从单体架构向微服务架构转型的过程,分析微服务架构的优势和面临的挑战。文章首先介绍单体架构的局限性,然后详细阐述微服务架构的核心概念及其在现代软件开发中的应用。通过对比两种架构,指出微服务化转型的必要性和实施策略。最后,讨论了微服务架构实施过程中可能遇到的问题及解决方案。
|
25天前
|
Cloud Native Devops 云计算
云计算的未来:云原生架构与微服务的革命####
【10月更文挑战第21天】 随着企业数字化转型的加速,云原生技术正迅速成为IT行业的新宠。本文深入探讨了云原生架构的核心理念、关键技术如容器化和微服务的优势,以及如何通过这些技术实现高效、灵活且可扩展的现代应用开发。我们将揭示云原生如何重塑软件开发流程,提升业务敏捷性,并探索其对企业IT架构的深远影响。 ####
40 3
|
1月前
|
Cloud Native 安全 数据安全/隐私保护
云原生架构下的微服务治理与挑战####
随着云计算技术的飞速发展,云原生架构以其高效、灵活、可扩展的特性成为现代企业IT架构的首选。本文聚焦于云原生环境下的微服务治理问题,探讨其在促进业务敏捷性的同时所面临的挑战及应对策略。通过分析微服务拆分、服务间通信、故障隔离与恢复等关键环节,本文旨在为读者提供一个关于如何在云原生环境中有效实施微服务治理的全面视角,助力企业在数字化转型的道路上稳健前行。 ####
下一篇
DataWorks