avalon复杂绑定
样式操作：ms-css-样式名=“样式值”,ms-class
ms-css-width="prop"(自动补px)
ms-css-height="{{prop}}%"
ms-css-color="prop"
ms-css-background-color="prop"
ms-css-font-size="{{prop}}px"
注：样式值不能加入css hack和!important
事件绑定：
ms-事件名 ms-on-事件名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ms-on</title>
<script src="avalon.js"></script>
<script>
avalon.ready(function(){
var vm = avalon.define({
$id: "test",
status: "event-type",
feild: "value-event-type",
firstname: "yang",
arr: ["aaa", "bbb", "ccc"],
callback: function(e) {
vm.status = e.type;
},
check: function(e) {
vm.feild = this.value + " " + e.type;
},
argsClick: function(e, a, b) {
alert([].slice.call(arguments).join(" "));
},
loopClick: function(a, e) {
alert(a+" "+e.type);
},
submit: function() {
var data = vm.$model;
alert(JSON.stringify(data));
}
});
avalon.scan();
});
</script>
</head>
<body>
<fieldset ms-controller="test">
<legend>有关事件回调传参</legend>
<div ms-mouseenter="callback" ms-mouseleave="callback">
{{status}}<br />
<input ms-on-input="check">{{ feild }}
</div>
<div ms-click="argsClick($event, 100, firstname)">点我</div>
<div ms-each-el="arr">
<p ms-click="loopClick(el, $event)">{{el}}</p>
</div>
<button ms-click="submit">提交</button>
</fieldset>
</body>
</html>
多重事件绑定：遵循后绑定的事件先执行的规则。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>multi-event-2</title>
<script src="avalon.js"></script>
<script>
var vm = avalon.define({
$id: "xxx",
fn: function() {
console.log("111111");
},
fn1: function() {
console.log("222222");
},
fn2: function() {
console.log("333333");
}
});
</script>
</head>
<body>
<div ms-controller="xxx" style="width: 100px; height: 100px; background: red;" ms-on-mouseenter-3="fn" ms-on-mouseenter-2="fn2" ms-on-mouseenter-1="fn1"></div>
</body>
</html>
循环操作：数组遍历：ms-repeat-->{{el}}，ms-each-->{{el}}；对象遍历：ms-repeat-->{{$key}},{{$val}},ms-with-->
{{$key}},{{$val}}
注：对ms-repeat而言，ms-repeat-*-->{{*}}，如外层ms-repeat-elem,内层可通过{{elem}}访问当前元素
两者区别：ms-repeat绑定在子元素上，ms-each绑定在父元素上，ms-with绑定在父元素上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ms-repeat-each</title>
<script src="avalon.js"></script>
<script>
var vm = avalon.define({
$id: "test",
arr: ["葡萄","苹果","香蕉","西瓜"]
});
</script>
</head>
<body>
<div ms-controller="test">
<ul>
<li ms-repeat="arr">{{el}}</li>
</ul>
<ul ms-each="arr">
<li>{{el}}</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ms-repeat-each</title>
<script src="avalon.js"></script>
<script>
var vm = avalon.define({
$id: "test",
arr: ["葡萄","苹果","香蕉","西瓜"],
obj: {
aaa: "1111",
bbb: "2222",
ccc: "3333",
ddd: "4444"
}
});
</script>
</head>
<body>
<div ms-controller="test">
<ul>
<li ms-repeat="obj">{{$key}}--{{$val}}</li>
</ul>
<ul ms-with="obj">
<li>{{$key}}--{{$val}}</li>
</ul>
</div>
</body>
</html>
循环显示数组元素的临时变量：
el：任何类型，引用着当前循环的元素
$index：Number，当前循环元素对应的索引值
$first：Boolean，当前循环元素是否为数组的第一个元素
$last：Boolean，当前循环元素是否为数组的最后一个元素
$remove：Function，用于从数组中删除当前循环
$outer: Object，用于内层循环访问外层循环的变量，内层访问外层{{$outer.$index}}
循环显示对象的临时变量：
$key：String，当前循环中的键名
$val：任何类型，当前循环中的键值
$outer：Object，用于内层循环访问外层循环的变量
数据的更新：
对象的更新：obj.key = newVal
数组的更新：简单值更新：arr.set(index, newVal)
对象值更新：arr[i].key = newVal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>update-model</title>
<script src="avalon.js"></script>
<script>
var vm = avalon.define({
$id: "test",
data: {
aaa: 111,
bbb: 222,
ccc: 333,
ddd: 444
},
arr1: ['a','b','c'],
arr2: [{text: 'a'},{text: 'b'},{text: 'c'}]
});
setTimeout(function() {
vm.data.aaa = 555;
}, 2000);
setTimeout(function() {
vm.data = {
ddd: 111,
eee: 222
};
}, 3000);
setTimeout(function() {
vm.arr1.set(0,"changed");
}, 4000);
setTimeout(function() {
vm.arr2[0].text = "changed";
}, 5000);
</script>
</head>
<body ms-controller="test">
<h1>数据的更新：</h1>
<ul>
<li ms-repeat="data">{{$key}}--{{$val}}</li>
</ul>
<ul>
<li ms-repeat="arr1">{{el}}</li>
</ul>
<ul>
<li ms-repeat="arr2">{{el.text}}</li>
</ul>
</body>
</html>
回调绑定属性：
data-repeat-rendered 当前操作名（add,del,move,append,clear），用ms-repeate绑定，当监控数组发生添加、删除、重排等操作时触发
data-with-sorted 原对象的所有键名构成数组，用ms-repeat，ms-with绑定，赶在对象渲染之前触发，要求输出一个字符串数组，对象的键值对会根据它一次输出
data-with-rendered 当前操作名（append），用ms-with绑定，当前目标对象输出页面后触发
data-each-rendered 当前操作名（add,del,move），用ms-each绑定，当监控数组发生添加、删除、重排等操作时触发
数组长度与循环分支判断：
获取数组长度：使用size方法，不使用length属性
循环分支判断：使用ms-if-loop判定属性，不能使用ms-if，因为ms-if先于ms-repeat执行的
监控数组方法：
push,pushAll,shift,unshift,pop,clice,remove,removeAt,removeAll,clear,ensure,sort,reverse,set
用法：vm.array.push或vm.array[push]
avalon模板类型：
嵌入到页面的模板：ms-include="expr"
独立成子页面的模板：ms-include-src="expr"
