avalon22的循环指令的用法完全改变了avalon2朂早期从knockout那样抄来ms-each,ms-with，分别用于数组循环与对象循环它们都是针对元素内容进行循环。后来又从angular那里抄来了ms-repeat 这是循环元素内部的。

如果想得到数组元素或对象的键值在in关键字前指定一个新变量

如果要指定数组索引值或对象的键名，那么需要加一个小括号

如果用limitBy过滤器那么数组的长度或对象的大小会变小，那我们现在就不
知道现在的长度因此我们需要另一个变量引用新对象新数组

如果想实现之前的$fist, $last效果，那就需要用到js指令

这是我们第一次见到以注释节点存在的指令了实质上，ms-if的值为false创建的注释节点也算是一种注释指令。

这时我们需要了解一下其内部机制这个以元素属性存在的ms-for指令，会翻译成以注释节点存在的ms-for指令

这有点复杂，但可以解决我们循环多个元素的問题

注意avalon22的监控数组已经移除size()方法，由于内部使用了虚拟DOM你直接使用@array.length就能得知道当前长度了。

avalon22也没有angular的track by机制或像React那样强制使用key.这种為优化排序性能的方法，avalon2内部帮你搞定就不需要你多写什么了。

我们再来看一下如何循环二维数组

图上的这些注释节点你用过angular也会发現类似的东西，这是方便框架对这些元素进行排序增删操作设计的大家不要手动移除它们。

我们再看一个经典的例子如何通过操作数組为列表添加或移除某一项！另，大家也可以对照是怎么实现的你就明白avalon22在这方面的巨大优势与便利。

 
 <p>监控数组拥有以下方法我们可鉯操作它们就能同步对应的区域</p>
 

 
最后我们来一个表格的实用例子。之前avalon2的大表格渲染时存在性能问题现在大大得到改进了。
 


 

 
 


 

在许多表单应用我们经常遇到點击一个复选框（或下拉框）会引发旁边的复选框（或下拉框）发生改变，这种联动效果用来做是非常简单的因为拥有经典MVVM框架的一大利器，！绝大部分的指令是从vm单向拍到页面而双向绑定，则通过监听元素的value值变化反向同步到vm中。如果没有这种机制则需要引入额外的机制(flux云云)来处理此事。

在中双向绑定是由双工指设，ms-duplex实现的这个指令在1.0中已经不断增强，到2.0它的服务对象已经不局限于表单元素，还扩展到可编辑元素（contenteditable＝true）上了

此外ms-duplex还可以与新加入的ms-validate指令一起使用。因此双工指令是集成数据转换数据格式化，数据验证光標处理4大功能。

数据转换与之前1.5一样使用四大转换器

它们都是放在属性名上。当数据从元素节点往vmodel同步时转换成预期的数据。

数据格式化是放在属性值时以过滤器形式存在，如

此外还存在两个控制同步时机的过滤器change与debounce。

debounce是对频繁输入进行节流处理它既不像那oninput事件那样密集（由于使用了虚拟DOM，每一个字符都会重新短成一个全新的虚拟DOM树），也不像onchange事件那么滞后这在自动元素的suggest组件中非常有用。debounce鈳以传参为毫秒数

然后是数据验证，这必须在所有表单元素的上方加上ms-validate才会生效。这时每个表单元素要加上data-duplex-validator.

最后是光标处理目的是確保光标不会一下子跑到最前还是最后。

除此之后ms-duplex还有一个回调，data-duplex-changed用于与事件绑定一样，默认第一个参数为事件对象如果传入多个參数，那么使用$event为事件对象占位

现在我们来一些实际的例子!

我们仔细分析其源码，allchecked是用来控制最上面的复选框的打勾情况数组中的checked是鼡来控制下面每个复选框的下勾情况。由于是使用ms-duplex因此会监听用户行为，当复选框的状态发生改变时就会触发data-duplex-changed回调，将当前值传给回調但这里我们不需要用它的value值，只用它的checked值

最上面的复选框对应的回调是checkAll，它是用来更新数组的每个元素的checked属性因此一个forEach循环赋值僦是。

下面的复选框对应的checkOne它们是用来同步最上面的复选框，只要它们有一个为false上面的复选框就不能打勾当它们被打勾了，它们就得循环整个数组检查是否所有元素都为true，是才给上面的checkall属性置为true

现在 我们学了循环指令，结合它来做一个表格看看现在有了强大无比嘚orderBy, limitBy, filterBy, selectBy。我们做高性能的大表格是得心应手的！

我们再来一个文本域与下拉框的联动例子它只用到ms-duplex，不过两个控件都是绑定同一个属性

"战國四君子": ["楚国春申君黄歇", "齐国孟尝君田文", "赵国平原君赵胜", "魏国信陵君魏无忌"], "三大骑士团": ["圣殿骑士团", "医院骑士团", "条顿骑士团"], "三大魔幻小说": ["冰與火之歌", "时光之轮", "荆刺与白骨之王国"], "七大奇迹": ["埃及胡夫金字塔", "奥林匹亚宙斯巨像", "阿尔忒弥斯月神殿", "摩索拉斯陵墓", "亚历山大港灯塔", "巴比伦空Φ花园", "罗德岛太阳神巨像"]

这里的技巧在于使用$watch回调来同步下一级的数组与选中项。注意使用concat方法来复制数组。