avalon中ms-duplex

最新推荐文章于 2023-06-13 20:45:00 发布

goodgirl1991

最新推荐文章于 2023-06-13 20:45:00 发布

阅读量5.6k

点赞数

分类专栏： avalon

本文链接：https://blog.csdn.net/goodgirl1991/article/details/50190865

版权

avalon 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

显示效果：以及