avalon视频学习笔记（三）

一、双向同步，双向绑定ms-duplex

含义：ms-duplex实现了双向数据绑定。双向绑定通俗说，除了负责将ViewModel中的应的值放到表单元素的value中，还对表单元素偷偷绑定一些事情，用于监听用户的输入从而自动刷新ViewModel。

使用场景一：

当元素为text、password、textaera时，要求prop为一个字符串，当我们改动它的内容时，avalon就会将此元素的value值赋给prop。

<head>
	<meta charset="UTF-8">
	<title>avalon-duplex-prop1</title>
	<script type="text/javascript" src="../avalon.min.js"></script>
	<script type="text/javascript">
	avalon.ready(function () {
		avalon.define({
			$id:"test",
			username:'felixlu',
			password:'Abc123',
			profile:'test string'
		});
		avalon.scan();
	})
	</script>
</head>
<body>
	<div ms-controller="test">
		<input type="text" ms-duplex="username">
		<input type="password" ms-duplex="password">
		<textarea name="" id="" cols="30" rows="10" ms-duplex="profile">
		</textarea>
		<div ms-text="username"></div>
		<div ms-text="password"></div>
		<div ms-text="profile"></div>
	</div>
</body>

场景二：

当元素为radio时，要求prop为一个布尔，当我们改动它的内容时，avalon就会将此元素的checkde值（布尔）赋给prop。

<head>
	<meta charset="UTF-8">
	<title>avalon-duplex-prop1</title>
	<script type="text/javascript" src="../avalon.min.js"></script>
	<script type="text/javascript">
	avalon.ready(function () {
		avalon.define({
			$id:"test",
			radios:true
		});
		avalon.scan();
	})
	</script>
</head>
<body>
	<div ms-controller="test">
	    <div><input type="radio" ms-duplex="radios" /></div>
		<div>radios：<span ms-text="radios"></span></div>
	</div>
</body>

场景三：

当元素为checkbox时，要求prop为一个数组，当我们改动它的内容时，avalon就会将此元素的value值push进prop。

<head>
	<meta charset="UTF-8">
	<title>avalon-dupelx-checkbox</title>
	<script type="text/javascript" src="../avalon.min.js"></script>
	<script>
	avalon.ready(function () {
		avalon.define({
			$id:'test',
			hobbies:[]
		});
		avalon.scan();
	})
	</script>
</head>
<body>
	<div ms-controller="test">
		<input ms-duplex="hobbies" type="checkbox" value="篮球" />篮球
		<input ms-duplex="hobbies" type="checkbox" value="足球" />足球
		<input ms-duplex="hobbies" type="checkbox" value="排球" />排球
		<div ms-text="hobbies"></div>
	</div>
</body>

场景四：

当元素为select时，要求prop为一个字符串或者数组（视multiple的值），当我们选中它的某一项时，avalon就会将option元素的value值或text值（没有value时）push进prop。

<head>
	<meta charset="UTF-8">
	<title>avalon-dupelx-select</title>
	<script type="text/javascript" src="../avalon.min.js"></script>
	<script type="text/javascript">
	avalon.ready(function () {
		avalon.define({
			$id:"text",
			flight:'',
			hotel:[]
		});
		avalon.scan()
	})
	</script>
</head>
<body ms-controller="text">
	<div>
		<select ms-duplex="flight" name="" id="">
			<option value="北京-天津">北京-天津</option>
			<option value="北京-成都">北京-成都</option>
			<option value="北京-上海">北京-上海</option>
			<option value="北京-广州">北京-广州</option>
		</select>
	</div>
	<div>
		<select ms-duplex="hotel" name="" id="" multiple="true">
			<option value="广州南站旅店">广州南站旅店</option>
			<option value="广州怡东酒店">广州怡东酒店</option>
			<option value="广州泊逸精品酒店">广州泊逸精品酒店</option>
			<option value="嘉立连锁酒店红星国际店">嘉立连锁酒店红星国际店</option>
		</select>
	</div>
	<div ms-text="flight"></div>
	<div ms-text="hotel"></div>
</body>

场景五：ms-dupelx-text=“prop”

只能用于radio，用于模拟text控件的行为，要求prop为一个字符串，当我们选中某一个radio时，avalon就会将此元素的value值赋给prop用于实现多选一。

<head>
	<meta charset="UTF-8">
	<title>avalon-duplex-text</title>
	<script type="text/javascript" src="../avalon.min.js"></script>
	<script type="text/javascript">
	avalon.ready(function () {
		avalon.define({
			$id:'text',
			gender:"男"
		});
		avalon.scan(); 
	})
	</script>
</head>
<body ms-controller="text">
	<p>
		<input ms-duplex-text="gender" type="radio" value="男" />男
		<input ms-duplex-text="gender" type="radio" value="女" />女
	</p>
	<div ms-text="gender"></div>
</body>

场景五：ms-duplex-boolean=“prop”

只能用于radio，要求prop为一个布尔值，并且元素的value为“true”或者“false”，当我们选中某一个radio时，avalon就会将此元素的value转换为布尔值，赋给对应的prop。

<head>
	<meta charset="UTF-8">
	<title>avalon-duplex-boolean</title>
	<script type="text/javascript" src="../avalon.min.js"></script>
	<script type="text/javascript">
	avalon.ready(function () {
		avalon.define({
			$id:'test',
			booleans:'true'
		});
		avalon.scan()
	})
	</script>
</head>
<body ms-controller="test">
是否在线支付：
	<div>
		<input ms-duplex-boolean="booleans" type="radio" name="op" value="true" />是
		<input ms-duplex-boolean="booleans" type="radio" name="op" value="false" />否
	</div>
	<div ms-text="booleans"></div>
</body>

场景六：ms-data-duplex-observe="false"

我们可以在元素节点上定义data-dupelx-observe="false"来禁止双向同步。

 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus速">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>ms-data-duplex-observe</title>
  <script type="text/javascript" src="../avalon.min.js"></script>
  <script type="text/javascript">
	avalon.ready(function(){
		avalon.define({
			$id:'test',
			username:'felixlu',
			password:'Abc123',
			profile:'test string'
		});
		avalon.scan();
	});
  </script>
 </head>
 <body ms-controller="test">
	<div>
		<input type="text" ms-duplex="username" ms-data-duplex-observe="false" />
		<input type="password" ms-duplex="password" ms-data-dupelx-observe="flase" />
		<textarea ms-duplex="profile"></textarea>
	</div>
	<ul>
		<li ms-text="username"></li>
		<li ms-text="password"></li>
		<li ms-text="profile"></li>
	</ul>
 </body>

来自为知笔记(Wiz)