有四种,ms-duplex-checked,ms-duplex-string,ms-duplex-boolean以及ms-duplex-number。他们皆用于根据input控件的value,来动态更新vm中的对象值。它们与ms-duplex的区别就是通过该种方式,在向vm传递数据的同时,还可以传递该数据的类型,而非泛泛的object类型。具体介绍如下
1、ms-duplex-checked.(可应用在以下input控件上:radio,checkbox)
通过该标签,可以及时根据是否选择了checkbox或radio控件,从而返回true或false给vm的相应对象(所以自然地,这个对象应该是boolean类型的哦~)。示例代码如下;
vm定义代码,在该处定义接收控件传递数据的那个对象:
<span style="font-family:KaiTi_GB2312;"> <script></span><span style="font-family:Arial;"> var model=avalon.define({ $id:"test", checked_radio_test:false<!--</span><span style="font-family: Arial; color: rgb(51, 51, 51); font-size: 14px; line-height: 26px;">接收控件传递数据的那个对象</span><span style="font-family:Arial;">---> }) </script></span>html代码,在该处定义控件,并且建立控件与vm对象的关联:
<body ms-controller="test"> <input ms-duplex-checked="checked_radio_test" type="radio" />{{checked_radio_test}} </body>显示效果:
注意,通过ms-duplex-checked,只可以有一个控件与vm的某个对象相关联,不可以发生多个控件与该vm对象相关联的情况哦~,比如说这样子
<body ms-controller="test"> <input ms-duplex-checked="checked_radio_test" type="checkbox" /> <input ms-duplex-checked="checked_radio_test" type="checkbox" />{{checked_radio_test}} </body>是错误的!
在涉及到单个checkbox的时候,最好还是用该种同步语句,因为经过试验,发现ms-duplex-boolean有时出问题不好用。
2、ms-duplex-string(可应用在所有input控件上)
它用于将你在表单中输入的string类型数据传递给vm的指定对象,动态更新该对象。示例代码:
vm的定义:
<script> var model=avalon.define({ $id:"test", string_test:"" }) </script>html代码;
<body ms-controller="test"> <input ms-duplex-string="string_test" /> {{string_test}} </body>
若是应用在checkbox或者radio这种控件上也ok啦,但是必须是多个checkbox/radio控件对应同一个vm对象的情况下,只有一个checkbox/radio不可以哦~,只要你通过value,将控件赋值就好啦,则对控件的选择就相当于输入了value所指定的string值。但注意,要通过数组的形式,来将他们对应到指定vm对象上,示例代码:
vm代码,注意,在此处对对象的定义,变成string类型的数组了,而不是简单的string值。
<!doctype html> <html lang="en"> <head> <title>Site Info Demo for jQuery $.get()</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script src="jquery-1.10.2.js"></script> <script src="avalon.js"></script> <script> var model=avalon.define({ $id:"test", arr:["aaa","bbb","ccc","ddd"], singleCheck: ["aaa","bbb"], }); </script> </head> <body ms-controller="test"> <ul> <li ms-repeat="arr"><input type="checkbox" ms-value="el" ms-duplex="singleCheck">{{el}}</li><!--注意此处必须通过数组的形式 --> </ul> </body> </html>
如果不通过数组的形式,即以下代码,则不会得到我们想要的效果
<!doctype html> <html lang="en"> <head> <title>Site Info Demo for jQuery $.get()</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script src="jquery-1.10.2.js"></script> <script src="avalon.js"></script> <script> var model=avalon.define({ $id:"test", singleCheck: ["aaa","bbb"], }); </script> </head> <body ms-controller="test"> <ul> <li><input type="checkbox" ms-duplex-string="singleCheck" ms-value="aaa"/>aaa</li> <li><input type="checkbox" ms-duplex-string="singleCheck" ms-value="bbb" />bbb</li> <li><input type="checkbox" ms-duplex="singleCheck" ms-value="ccc" />ccc</li> <li><input type="checkbox" ms-duplex="singleCheck" ms-value="ddd" />ddd</li> <!--看!此处未通过数组的方式--> </ul> </body> </html>
3、ms-duplex-number(可应用在所有input控件上)
用于将你在表单中输入的number类型数据传递给vm的指定对象,动态更新该对象。对于代码的编写就不写了,参考ms-duplex-string,与那个类似。此时加入你在input录入的为02dkeu,则传入avalon指定属性的值只有02,即只传入number类型的值。
4、ms-duplex-boolean(可应用在所有input控件上)
用于将你在表单中输入的boolean类型数据传递给vm的指定对象,动态更新该对象。若控件为checkbox等,就好说了,若为文本框等类型,则若输入为“true”或“false”传入的值自然对应的为true或false,但若输入的数据为除了这两个字符串外的其他字符串,则将该字符串自动转化为false类型的boolean值,传入vm对象中。代码就不写了