迷你MVVM框架 avalonjs 学习教程7、数据缓存
jQuery的许多功能都可以通过avalon的绑定属性来处理，如click方法对应ms-click，css方法对应ms-css，toggle方法对应ms-visible，它的数据缓存功能avalon也搬过来了。但不同于jQuery的是，avalon是直接将数据保存到元素节点的HTML5的data-☆属性上。在从data-☆属性还原数据时，它会简单的数据转换，再返回给你。
在ms-data绑定中，考虑到如果将对象转换为字符串再还原会丢失函数什么的，因此它们会直接保存到元素之上。
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="../avalon.js"></script>
<script>
avalon.define({
$id: "test",
$skipArray: ["array", "object"],
number: 111,
number2: NaN,
bool: false,
bool2: true,
nn: null,
vv: void 0,
array: [1, 2, 3],
date: new Date,
object: {
name: "这是数据"
},
show: function() {
var elem = avalon(this)
console.log(
elem.data("number"), elem.data("number2"),
elem.data("bool"), elem.data("bool2"),
elem.data("null"), elem.data("void"),
elem.data("fn"), this["data-array"],
this["data-date"], this["data-object"]
)
}
})
</script>
</head>
<body ms-controller="test">
<div ms-data-number="number"
ms-data-number2="number2"
ms-data-bool="bool"
ms-data-bool2="bool2"
ms-data-void="vv"
ms-data-null="nn"
ms-data-array="array"
ms-data-date="date"
ms-data-object="object"
ms-data-fn="show"
ms-click="show"
>点我</div>
</body>
</html>
这是一个很简单的绑定，没什么好说的，只要记住对象与数组是直接保存在元素节点上就行了。下面是它的源码：
"data": function(val, elem, data) {
var key = "data-" + data.param
if (val && typeof val === "object") {
elem[key] = val
} else {
elem.setAttribute(key, String(val))
}
},
迷你MVVM框架 avalonjs 学习教程7、数据缓存的更多相关文章
- 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾
avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...
- 迷你MVVM框架 avalonjs 学习教程1、引入avalon
avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...
- 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC
大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...
- 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制
在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...
- 迷你MVVM框架 avalonjs 学习教程4、数据填充
MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...
- 迷你MVVM框架 avalonjs 学习教程12、数据联动
在许多表单应用,我们经常遇到点击一个复选框(或下拉框)会引发旁边的复选框(或下拉框)发生改变,这种联动效果用avalon来做是非常简单的.在avalon里,存在各种绑定回调与$watch回调,完全满足 ...
- 迷你MVVM框架 avalonjs 学习教程20、路由系统
SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...
- 迷你MVVM框架 avalonjs 学习教程11、循环操作
avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...
- 迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域
一个项目是由许多人分工写的,因此必须要合理地拆散,于是有了模块化.体现在工作上,PM通常它这为某某版块,某某频道,某某页面.某一个模块,必须是包含其固有的数据,样式,HTML与处理逻辑.在jQuery ...
随机推荐
- pycharm 教程（一）安装和首次使用
PyCharm 是我用过的Python编辑器中,比较顺手的一个.而且可以跨平台,在 mac 和 windows 下面都可以用,这点比较好. 首先预览一下 PyCharm 在实际应用中的界面:(更改了P ...
- python 发送QQ邮件的小例子
首先QQ邮件用第三方客户端发送要申请验证码.而不是QQ的密码. 授权码就是你接下来登录要使用的密码 那么剩下的工作就很简单了.附简单代码如下: #coding:utf-8 import smtplib ...
- 修改Intelij IDEA的maven依据下载为国内镜像（阿里）
1.win7环境,默认情况下在用户目录的.m2下自己新建setting文件.QQ群交流:697028234 .m2\settings.xml 2.settings.xml文件内容为: <sett ...
- git 常用命令--抓取分支-为自己记录（二）
二:抓取分支: 多人协作时,大家都会往master分支上推送各自的修改.现在我们可以模拟另外一个同事,可以在另一台电脑上(注意要把SSH key添加到github上)或者同一台电脑上另外一个目录克隆, ...
- JavaScript的this原理
this原理 理解下面两种写法,可能有不一样的结果. var obj = { foo: function () {} }; var foo = obj.foo; // 写法一 obj.foo() // ...
- VC++ 6.0 sqlite3 配置、测试
/************************************************************************************* * VC++6.0 sql ...
- Diffie-Hellman 算法
Diffie-Hellman 算法描述: 目前被许多商业产品交易采用. HD 算法为公开的密钥算法,发明于1976年.该算法不能用于加密或解密,而是用于密钥的传输和分配. DH 算法的安全性 ...
- LG5024 保卫王国
题意 题目描述 Z 国有\(n\)座城市,\(n - 1\)条双向道路,每条双向道路连接两座城市,且任意两座城市 都能通过若干条道路相互到达. Z 国的国防部长小 Z 要在城市中驻扎军队.驻扎军队需要 ...
- 获取 graphql schema 信息
模块 npm install -g get-graphql-schema get-graphql-schema GRAPHQL_URL > schema.graphql 简单使用 使用prism ...
- ajax请求返回Json字符串运用highcharts数据图表展现数据
[1].[图片] Json字符串和highcharts数据图表展现.jpg 跳至 [1] code=26754#44745" rel="nofollow"> [2] ...