一、双向同步，双向绑定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>
时间： 2024-10-14 19:23:48