avalon中ms-duplex

有四种,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对象中。代码就不写了

显示效果:以及

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值