1、绑定属性ms-data-*
avalon的数据缓存功能与jquery的data()类似,但不同于jquery的是:avalon是直接将数据保存在元素节点上的data-*属性上。
在从data-*属性还原数据时,它会作简单的数据转换,再返回。
在ms-data绑定属性中,对象与数组是直接保存在元素节点上。
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>avalon-ms-data-*</title>
<script type="text/javascript" src="../avalon.min.js"></script>
<script type="text/javascript">
avalon.ready(function(){
avalon.define({
$id:'text',
number1:111,
number2:NaN,
bool:false,
bool2:true,
nn:null,
vv:undefined,
array:[1,2,3],
date:new Date,
object:{
name:"这是数据"
},
show:function(){
var elem = avalon(this);
console.log(
elem.data("number1"),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"]
);
alert(123)
}
});
avalon.scan();
})
</script>
</head>
<body ms-controller="text">
<div ms-data-number="number1"
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>