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实现编辑功能,如需转载请自行联系原博主。

目录
相关文章
|
1月前
|
存储 监控 数据可视化
SLS 虽然不是直接使用 OSS 作为底层存储,但它凭借自身独特的存储架构和功能,为用户提供了一种专业、高效的日志服务解决方案。
【9月更文挑战第2天】SLS 虽然不是直接使用 OSS 作为底层存储,但它凭借自身独特的存储架构和功能,为用户提供了一种专业、高效的日志服务解决方案。
73 9
|
2月前
|
前端开发 开发者 C#
WPF开发者必读:MVVM模式实战,轻松实现现代桌面应用架构,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,MVVM(Model-View-ViewModel)模式通过分离应用程序的逻辑和界面,提高了代码的可维护性和可扩展性。本文介绍了MVVM模式的三个核心组件:Model(数据模型)、View(用户界面)和ViewModel(处理数据绑定和逻辑),并通过示例代码展示了如何在WPF项目中实现MVVM模式。通过这种方式,开发者可以构建更加高效和可扩展的桌面应用程序。
66 0
|
2月前
|
Cloud Native
核心系统转型问题之平衡核心架构中的功能性与非功能性需求如何解决
核心系统转型问题之平衡核心架构中的功能性与非功能性需求如何解决
|
4月前
|
前端开发 Java 开发工具
Java医院绩效考核系统源码:关于医院绩效考核系统的技术架构、系统功能、如何选择医院绩效考核管理系统
系统开发环境 开发语言:java 技术架构:B/S架构 开发工具:maven、Visual Studio Code 前端框架:avue 后端框架:springboot、mybaits 数 据 库:MySQL
46 4
Java医院绩效考核系统源码:关于医院绩效考核系统的技术架构、系统功能、如何选择医院绩效考核管理系统
|
3月前
|
负载均衡 监控 Kubernetes
Service Mesh 是一种用于处理服务间通信的基础设施层,它通常与微服务架构一起使用,以提供诸如服务发现、负载均衡、熔断、监控、追踪和安全性等功能。
Service Mesh 是一种用于处理服务间通信的基础设施层,它通常与微服务架构一起使用,以提供诸如服务发现、负载均衡、熔断、监控、追踪和安全性等功能。
|
4月前
|
缓存 NoSQL Java
在 SSM 架构(Spring + SpringMVC + MyBatis)中,可以通过 Spring 的注解式缓存来实现 Redis 缓存功能
【6月更文挑战第18天】在SSM(Spring+SpringMVC+MyBatis)中集成Redis缓存,涉及以下步骤:添加Spring Boot的`spring-boot-starter-data-redis`依赖;配置Redis连接池(如JedisPoolConfig)和连接工厂;在Service层使用`@Cacheable`注解标记缓存方法,指定缓存名和键生成策略;最后,在主配置类启用缓存注解。通过这些步骤,可以利用Spring的注解实现Redis缓存。
70 2
|
3月前
|
负载均衡 Java Linux
黑马头条01,环境搭建,今日头条的介绍,今日头条的功能架构图,技术栈的说明,服务层,nacos(奶靠丝)安装,安装在Linux服务器上环境准备,
黑马头条01,环境搭建,今日头条的介绍,今日头条的功能架构图,技术栈的说明,服务层,nacos(奶靠丝)安装,安装在Linux服务器上环境准备,
|
3月前
|
缓存 Devops 微服务
微服务01好处,随着代码越多耦合度越多,升级维护困难,微服务技术栈,异步通信技术,缓存技术,DevOps技术,搜索技术,单体架构,分布式架构将业务功能进行拆分,部署时费劲,集连失败如何解决
微服务01好处,随着代码越多耦合度越多,升级维护困难,微服务技术栈,异步通信技术,缓存技术,DevOps技术,搜索技术,单体架构,分布式架构将业务功能进行拆分,部署时费劲,集连失败如何解决
|
4月前
|
前端开发 测试技术 API
探索安卓应用的架构演进:从MVC到MVVM
本篇文章将深入探讨安卓应用开发中的架构演进,特别关注从传统的MVC(Model-View-Controller)到现代流行的MVVM(Model-View-ViewModel)架构的转变。通过对比两种架构的设计理念、实现方式和实际应用案例,解析MVVM在提高代码可维护性和可测试性方面的优势。
55 0
|
15天前
|
安全 应用服务中间件 API
微服务分布式系统架构之zookeeper与dubbo-2
微服务分布式系统架构之zookeeper与dubbo-2