原文:http://javascriptmvc.com/docs.html#&who=jQuery.Model
翻译:刘贵学(liuguixue@gmail.com)
模型是用于封装应用程序的数据层。对大型应用中来讲,模型是非常重要的:
- 封装服务,这样控制层与视图不需要关心数据从哪里来;
- 提供辅助函数,使原始的业务数据操作与抽象更简单
有两种实现方法:
- 对服务请求或交互中获取数据;
- 将原始的业务数据转换或封装成更有用的形式;
基本用法
jQuery.Model类提供了一个用于来组织您应用程序的数据层的基本框架。首先看一个Ajax操作不考虑模型的情况,假如我们有一个应用程序,需求如下:
- 检索任务列表;
- 显示每个任务的剩余天数;
- 当用户点击后,标记完成
让我们看一下不用模型如何实现:
此时代码看起来也还好,但如果此时:
- 业务改变?
- 应用的其他部分也要计算剩余时间?
- 其他部分也要获取所有任务?
- 同一个任务要在页面的不同地方显示?
解决方案当然是需要一个强大模型层。在学写一个model之前,让我们看一下一个漂亮的模型的控制层如何实现:
views/tasks/list.ejs文件内容如下:
这样做是不是好多了!当然,这些改善是因为我们使用了视图,同样也使我们的控制器完全可读。那让我们看一下模型:
这样更好了,因为您可以在一个单独实现Ajax功能,并能在返回时封装这些数据。让我们
谈谈控制器与视图中的每个加粗项。
Task.findAll
Task的findAll函数从"/tasks.json"请求数据,当数据返回时,先执行"wrapMany"函数后再传给成功后的回调函数。
如果你不知道回调函数如何工作,您可以看一下wrapMany 与 callback.
el.model
jQuery.fn.model 是jQuery的辅助工具,它可以从html元素中返回一个模型的实例,list.ejs模板将所有的任务转为html元素,做法如下:
剩余时间timeRemaining
timeRemaining只是一个示例函数,用于封装您模型中的原始数据。
其他的好东西
以上这只是关于模型功能的一个小尝试,让我们看看下面这些特性:
封装
学会怎样与服务交互:
类型转换
将"10-20-1982"的数据自动转为 new Date(1982,9,20)
jQuery.Model.List
学习如何轻松处理多示例:
验证
验证你模型的属性