本文介绍如何利用Avalon框架的duplex双向绑定特性，简洁地实现复选框全选与反选逻辑。通过ms-duplex-number等指令自动同步视图与模型，避免繁琐的循环判断代码，提升开发效率与代码优雅度。
Avalon duplex绑定实现Checkbox全选
duplex双工绑定是avalon框架中极具特色的功能之一，它在底层为开发者处理了大量繁琐逻辑，从而显著减少代码量并提升代码的可读性与优雅程度。接下来将通过一个典型的复选框全选示例进行演示。
具体需求如下（虽然常见，但仍需明确）：
1. 当勾选全选框时，所有子复选框应被同时勾选；若取消全选框，则所有子复选框均取消勾选。
2. 若任意一个子复选框未被勾选，则全选框的状态应自动取消勾选。
3. 当所有子复选框均处于勾选状态时，全选框应自动变为勾选状态。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
margin-left: 100px;
}
#wrap li{
display: inline-block;
*display: inline;
zoom:1;
vertical-align: middle;
}
</style>
<script type="text/javascript" src='seed.js'></script>
</head>
<body>
<div id='wrap' ms-controller='duplex'>
<p><input type='checkbox' data-duplex-changed="select_all_cb" ms-duplex-checked='select_all'>全选</p>
<ul>
<li ms-repeat='list'>
<input type='checkbox' ms-duplex-number="selected" ms-attr-value='el.id'>{{el.text}}
</li>
</ul>
<p>选中项的id:{{selected}}</p>
</div>
<script type="text/javascript">
require('avalon',function(avalon){
var duplex=avalon.define('duplex',function(vm){
vm.selected=[];//保存勾选的选项的id,方便传给后台
vm.list=[{id:1,text:'aaa'},{id:2,text:'bbb'},{id:3,text:'ccc'},{id:4,text:'ddd'},{id:5,text:'eee'},{id:6,text:'fff'}];
vm.select_all_cb=function(){//全选框change事件回调
var list=duplex.list,selected=duplex.selected;
if(this.checked){
avalon.each(list,function(i,v){//循环保存着已经勾选选框的数据
selected.ensure(v['id']);//如果里面没有当前选框的数据，就保存
});
}else
selected.clear();//清空
};
vm.select_all=0;
});
duplex.selected.$watch('length',function(after){//监听保存数据数组的变化
var len=duplex.list.length;
if(after==len)//子选框全部被勾选
duplex.select_all=1;
else//子选框有一个没有被勾选
duplex.select_all=0;
});
avalon.scan();
});
</script>
</body>
</html>
实现效果与注意事项
实现效果
在实现过程中，有几点需要特别说明：
1. 使用data-duplex-changed属性可以监听复选框状态的变化，并触发相应的回调函数。
2. ms-duplex-number="selected"是关键指令，其中selected数组与子选项框的状态保持同步。这意味着selected数组元素数量的增减会直接反映在子选项框的视图更新上，反之亦然。
3. ms-duplex-*指令的后缀必须与复选框value属性值的类型一致，否则无法正确同步视图。例如，若复选框的value值为数字类型，则应使用ms-duplex-number。
4. 复选框value属性值的类型不应想当然地判定。曾遇到从后台传输的id看似为数字，但视图无法同步的情况，最终通过改为ms-duplex-string解决。因此，即使值为'7'，也需明确其实际类型，确保匹配正确。
通过这个简单示例可以看出，使用Avalon这类MVVM框架能极大提升编码体验。若不使用此类框架，可能需要编写大量的for循环和if判断语句来实现相同功能。
以上即为本文的全部内容，希望对大家有所帮助。