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"