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))
}
},