MVVM架构~前台后台分离的思想与实践

简介:

MVVM是一种架构思想,是一种解决问题的方式,对于一个项目,一个功能模块,你可以选择使用MVVM的架构来实现,而knockoutjs只是实现MVVM的一种工具,它是在前端实现的,这一点,我们必须的清楚.

思想

下面说一下这讲的重点,前台和后台的分工问题,占占认为,前台只负责页面及页面CSS及实现效果的JS,而后台的工作包括业务的处理,数据的持久化,前台数据的绑定(knockoutjs)等等.

实践

下面是前台HTML代码

<table border="1">
    <tr>
        <th>QuestionInfoID
        </th>
        <th>用户</th>
        <th>类型</th>
        <th>知识点</th>
        <th>难度</th>
        <th>日期</th>
        <th>年级</th>
        <th>学科</th>
        <th>图像</th>
    </tr>
    <tbody data-bind="foreach:model">
        <tr>
            <td data-bind="text:QuestionInfoID"></td>
            <td>
                <span data-bind="if:Partner_Info"><span data-bind="text:Partner_Info.AccountName"></span></span>
                <span data-bind="if:User_Info"><span data-bind="text:User_Info.RealName"></span></span>
            </td>
            <td data-bind="text:OwnerType"></td>
            <td data-bind="text:Knowledge"></td>
            <td data-bind="text:Difficulty"></td>
            <td data-bind="text:AddTime"></td>
            <td data-bind="foreach:Question_Point_R"><span data-bind="text:Point_Info.Grade"></span></td>
            <td data-bind="foreach:Question_Point_R"><span data-bind="text:Point_Info.Subject"></span></td>
            <td>
                <img width="21" height="21" src="1.jpg" onerror="errorImg(this)" /></td>
        </tr>
    </tbody>

</table>

下面是后台的knockoutjs代码

@Html.Pager(Model)//C#数据分页
<script type="text/ecmascript">
    //图像加载出错时的处理
    function errorImg(img) {
        img.src = "http://www.baidu.com/img/bdlogo.gif";
        img.onerror = null;
    }

    var model = ko.observableArray(@Html.Raw(Json.Encode(Model)));//从后台得到数据集合,并转化为json对象
    ko.applyBindings(model);
</script>

运行截图

说明

在这个例子中,我们使用了knockoutjs里的if,foreach等关键字,if可以判断一个对象是否为空,而foreach可以把集合对象遍历出来.

本文转自博客园张占岭(仓储大叔)的博客,原文链接:MVVM架构~前台后台分离的思想与实践,如需转载请自行联系原博主。

目录
相关文章
|
数据采集 监控 API
移动端性能监控探索:iOS RUM SDK 技术架构与实践
阿里云 RUM SDK 作为一款性能体验监控采集工具,可以作为辅助 App 运维的强有力助手,提升您的问题排查效率。
666 79
|
存储 数据挖掘 BI
2-5 倍性能提升,30% 成本降低,阿里云 SelectDB 存算分离架构助力波司登集团实现降本增效
波司登集团升级大数据架构,采用阿里云数据库 SelectDB 版,实现资源隔离与弹性扩缩容,查询性能提升 2-5 倍,总体成本降低 30% 以上,效率提升 30%,助力销售旺季高效运营。
822 9
|
存储 运维 分布式计算
零售数据湖的进化之路:滔搏从Lambda架构到阿里云Flink+Paimon统一架构的实战实践
在数字化浪潮席卷全球的今天,传统零售企业面临着前所未有的技术挑战和转型压力。本文整理自 Flink Forward Asia 2025 城市巡回上海站,滔搏技术负责人分享了滔搏从传统 Lambda 架构向阿里云实时计算 Flink 版+Paimon 统一架构转型的完整实战历程。这不仅是一次技术架构的重大升级,更是中国零售企业拥抱实时数据湖仓一体化的典型案例。
880 0
|
数据采集 存储 运维
MyEMS:技术架构深度剖析与用户实践支持体系
MyEMS 是一款开源能源管理系统,采用分层架构设计,涵盖数据采集、传输、处理与应用全流程,支持多协议设备接入与多样化能源场景。系统具备高扩展性与易用性,结合完善的文档、社区、培训与定制服务,助力不同技术背景用户高效实现能源数字化管理,降低使用门槛与运维成本,广泛适用于工业、商业及公共机构等场景。
565 0
|
数据采集 运维 数据可视化
AR 运维系统与 MES、EMA、IoT 系统的融合架构与实践
AR运维系统融合IoT、EMA、MES数据,构建“感知-分析-决策-执行”闭环。通过AR终端实现设备数据可视化,实时呈现温度、工单等信息,提升运维效率与生产可靠性。(238字)
|
存储 SQL 消息中间件
从 ClickHouse 到 StarRocks 存算分离: 携程 UBT 架构升级实践
查询性能实现从秒级到毫秒级的跨越式提升
1097 63
|
消息中间件 缓存 监控
中间件架构设计与实践:构建高性能分布式系统的核心基石
摘要 本文系统探讨了中间件技术及其在分布式系统中的核心价值。作者首先定义了中间件作为连接系统组件的&quot;神经网络&quot;,强调其在数据传输、系统稳定性和扩展性中的关键作用。随后详细分类了中间件体系,包括通信中间件(如RabbitMQ/Kafka)、数据中间件(如Redis/MyCAT)等类型。文章重点剖析了消息中间件的实现机制,通过Spring Boot代码示例展示了消息生产者的完整实现,涵盖消息ID生成、持久化、批量发送及重试机制等关键技术点。最后,作者指出中间件架构设计对系统性能的决定性影响,
|
前端开发 Java 开发者
MVC 架构模式技术详解与实践
本文档旨在全面解析软件工程中经典且至关重要的 MVC(Model-View-Controller) 架构模式。内容将深入探讨 MVC 的核心思想、三大组件的职责与交互关系、其优势与劣势,并重点分析其在现代 Web 开发中的具体实现,特别是以 Spring MVC 框架为例,详解其请求处理流程、核心组件及基本开发实践。通过本文档,读者将能够深刻理解 MVC 的设计哲学,并掌握基于该模式进行 Web 应用开发的能力。
2126 1
|
存储 自然语言处理 前端开发
百亿级知识库解决方案:从零带你构建高并发RAG架构(附实践代码)
本文详解构建高效RAG系统的关键技术,涵盖基础架构、高级查询转换、智能路由、索引优化、噪声控制与端到端评估,助你打造稳定、精准的检索增强生成系统。
2535 2
|
边缘计算 Kubernetes 物联网
Kubernetes 赋能边缘计算:架构解析、挑战突破与实践方案
在物联网和工业互联网快速发展的背景下,边缘计算凭借就近处理数据的优势,成为解决云计算延迟高、带宽成本高的关键技术。而 Kubernetes 凭借统一管理、容器化适配和强大生态扩展性,正逐步成为边缘计算的核心编排平台。本文系统解析 Kubernetes 适配边缘环境的架构分层、核心挑战与新兴解决方案,为企业落地边缘项目提供实践参考。
1208 0