avalon-双向同步
1. duplex
用于双向绑定
使用场景
测试duplex（顺便测试了html5 input的不同tpye）
<div class="input-group" ms-controller="duplex">
<input ms-duplex="text"type="text">
<inputms-duplex="password" type="password">
<input ms-duplex="color"type="color">
<input ms-duplex="email"type="email">
<inputms-duplex="Date_pickers" type="Date pickers">
<inputms-duplex="search" type="search">
<input ms-duplex="range"type="range">
<inputms-duplex="number" type="number">
<input ms-duplex="url"type="url">
<divms-text="text"></div>
<div ms-text="password"></div>
<divms-text="color"></div>
<divms-text="email"></div>
<divms-text="Date_pickers"></div>
<divms-text="search"></div>
<divms-text="range"></div>
<divms-text="number"></div>
<divms-text="url"></div>
</div>
avalon.ready(function(){
avalon.define({
$id:'duplex',
text:'text',
password:'password',
color:'',
email:'[email protected]',
Date_pickers:'2016/3/14',
number:'123456',
url:'http://www.bootcss.com/',
range:'80'
});
avalon.scan();
});
修改js中定义的属性，页面会更改，同时，在页面上修改默认的输入值，下面对应的ms-text内的值也会更改。减少了DOM操作和事件绑定。
对于容易混淆的radio、checkbox、select，进行如下测试：
<divclass="input-group" ms-controller="duplex">
<input type="radio"ms-duplex-text="gender" value="male">男
<input type="radio"ms-duplex-text="gender" value="female">女
<select name="lang"ms-duplex="lang" multiple="true">
<option value="Chinese">Chinese</option>
<optionvalue="English">English</option>
<optionvalue="Japanese">Japanese</option>
</select>
<select name="city"ms-duplex="city">
<optionvalue="Hebei">Hebei</option>
<optionvalue="NewYork">NewYork</option>
<optionvalue="Tokyo">Tokyo</option>
</select>
<input type="checkbox"ms-duplex="hobbies" value="book">book
<input type="checkbox"ms-duplex="hobbies" value="movie">movie
<input type="checkbox"ms-duplex="hobbies" value="music">music
<div>{{gender}}</div>
<div>{{lang}}</div>
<div>{{city}}</div>
<div>{{hobbies}}</div>
avalon.define({
$id:'duplex',
gender:'male',
lang:[],
city:'',
hobbies:[]
});
avalon.scan();
2. ms-duplex-text
<divclass="input-group" ms-controller="duplex">
<input type="radio"ms-duplex-text="gender" value="male">男
<input type="radio"ms-duplex-text="gender" value="female">女
<div>{{gender}}</div>
</div>
avalon.define({
$id:'duplex',
gender:'male'
});
avalon.scan();
3. ms-duplex-boolean
<inputtype="radio" ms-duplex-boolean="choose"value="true">是
<input type="radio"ms-duplex-boolean="choose" value="false">否
<div>{{choose}}</div>
avalon.define({
$id:'duplex',
choose:'false'
});
avalon.scan();
4. ms-data-duplex-observe=”false”
禁止双向绑定，页面内容修改将不再影响vm内数据