MVVM架构~前台后台分离的思想与实践
2014-04-23 10:30
225 查看
返回目录
MVVM是一种架构思想,是一种解决问题的方式,对于一个项目,一个功能模块,你可以选择使用MVVM的架构来实现,而knockoutjs只是实现MVVM的一种工具,它是在前端实现的,这一点,我们必须的清楚.
下面是后台的knockoutjs代码
返回目录
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可以把集合对象遍历出来.返回目录
相关文章推荐
- 必备,前台与后台分离的架构实践
- App 后台架构设计方案 设计思想与最佳实践
- App 后台架构设计方案 设计思想与最佳实践
- App 后台架构设计方案 设计思想与最佳实践
- App 后台架构设计方案 设计思想与最佳实践
- App 后台架构设计方案 设计思想与最佳实践
- App 后台架构设计方案 设计思想与最佳实践
- WPF MVVM 架构 Step By Step(4)(添加bindings - 完全去掉后台代码)
- App后台开发运维和架构实践学习总结(7)——RESTful API 设计规范
- ASP.NET所谓前台调用后台、后台调用前台想到HTTP——实践篇
- App后台开发运维和架构实践学习总结(2)——RESTful API设计技巧
- 深夜闲聊Java与PHP 以及架构设计思想与最佳实践
- 数据库读写分离架构实践
- APP后台开发运维与架构实践 5 : Nginx --- App后台HTTP服务的利器
- App后台开发运维和架构实践学习总结(2)——RESTful API设计技巧
- 前后台分离思想
- APP后台开发运维与架构实践 6 : MySQL --- App后台最常用的数据库
- 友盟分享 | 移动大数据平台架构思想以及实践经验
- Yii2 前台用户与后台用户分离
- App后台开发运维和架构实践读书笔记