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

返回目录

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

思想

下面说一下这讲的重点，前台和后台的分工问题，占占认为，前台只负责页面及页面ＣＳＳ及实现效果的ＪＳ，而后台的工作包括业务的处理，数据的持久化，前台数据的绑定（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可以把集合对象遍历出来．

返回目录

转载于:https://www.cnblogs.com/lori/p/3682345.html

MVVM架构~前台后台分离的思想与实践相关推荐

《Android构建MVVM》系列(一) 之 MVVM架构快速入门
前言本文属于<Android构建MVVM>系列开篇,共六个篇章,详见目录树. 该系列文章旨在为Android的开发者入门MVVM架构,掌握其基本开发模式. 辅以讲解Android Arc ...
java 管理后台前台分离_系统前台后台是否应该分离（包括部署）
这个问题困惑我很久了,可能前台/后台这个用词不准确,稍微解释一下我的理解, 很多系统都分为前台和后台,其分别针对的使用者也是不同的 1. 前台一般针对"消费"用户(如读者.网购用户 ...
iis 设置网站前台后台 http和https分离访问
Iis 设置网站前台后台 http和https分离访问今天遇到一个项目要求前台与后台访问协议要分离,即前台使用http访问,后台使用https访问. 一.安装重写url2.0模块 1. 从微软的官 ...
深入解析MVVM架构
mvvm 前言我想做Android开发的大佬都用过MVP,在谷歌没有提出MVVM这种架构模式的时候,大多数开发者都是从传统的MVC过度到MVP的,的确MVP相对MVC来说的确有了很大的改进,具体改进 ...
MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定
Knockoutjs是微软mvc4里一个新东西,用这在MVC环境里实现MVVM,小微这次没有大张旗鼓,而是愉愉的为我们开发者嵌入了一个实现MVVM的插件,这下面的几篇文章中,我和大家将一起去探讨它, ...
对中国商业银行前中后台分离的反思
前中后台分离是建设流程银行的核心问题之一.前中后台分离固然给中国商业银行带来很多思想.组织.流程.行为和文化上的保障和转变,但是,在实现这一目标的过程中也产生一些问题. 为适应向零售银行转型,我国商业 ...
Android MVVM 架构应用实现
以前项目中虽然也使用MVVM架构,但由于整体框架不是我自己搭建的,导致我对于MVVM架构的整体还是很不熟悉,所以这次就自己搭建并实现一次MVVM架构. MVVM架构使用的组件有ViewModel.Li ...
typecho和wordpress模板了解、开发流程介绍、前台后台前端后端区分
网站模板搭建网站: 使用网站模板搭建网站很简单,只需要将相关文件放到你自己的服务器上面,之后在进行相关的配置即可.这里给大家介绍两款网站模板: typecho: 是一个轻量高效,简单操作就能搭建网站的 ...
手把手教你实现MVVM架构
引言现在的前端真可谓是百花齐放,百家争鸣,各种框架层出不穷,但是主要目前用的最多的还是要数Vue.React.以及Angular,这三种,当然不乏近期新出的一些其他框架,但是她们都有一个显著的特点, ...

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

思想

实践

运行截图

说明

MVVM架构~前台后台分离的思想与实践相关推荐

最新文章

热门文章