循环绑定

avalon2.0的ms-for绑定集齐了ms-repeat, ms-each, ms-with的所有功能, 并且更好用, 性能提升七八倍

ms-for可以同时循环对象与数组

  1. <ul>
  2.     <li ms-for="el in @aaa">{{el}}</li>
  3. </ul>

现在采用类似angular的语法, in前面如果只有一个变量,那么它就是数组元素或对象的属性名

  1. vm.aaa = ['aaa','bbb','ccc']
  2. vm.bbb = {a: 1, b: 2, c: 3}
  1. <ul>
  2.     <li ms-for="(aaa, el) in @aaa">{{aaa}}-{{el}}</li>
  3. </ul
  4. <ul>
  5.     <li ms-for="(k, v) in @bbb">{{k}}-{{v}}</li>
  6. </ul>

依次输出的LI元素内容为0-aaa,1-bbb,2-ccc, a-1,b-2,c-3

in 前面有两个变量, 它们需要放在小括号里,以逗号隔开, 那么分别代表数组有索引值与元素, 或对象的键名与键值, 这个与jQuery或avalon的each方法的回调参数一致。

小括号里面的变量是随便起的,主要能符合JS变量命名规范就行,当然,也不要与window, this这样变量冲突.

  1.  <li ms-for="($index, el) in @arr">{{$index}}-{{el}}</li>
  2.  <li ms-for="($key, $val) in @obj">{{$key}}-{{$val}}</li>

写成这样,就与avalon1.*很相像了

ms-for还可以配套data-for-rendered回调,当列表渲染好时执行此方法

  1. <ul>
  2.    <li ms-for="el in @arr" data-for-rendered='@fn'>{{el}}</li>
  3. <ul>

fn为vm中的一个函数，用法与ms-on-*差不多，如果不传参，默认第一个参数为事件对象，类型type为rendered，target为当前循环区域的父节点，这里为｀ul`元素。并且回调中的this指向vm。

  1. {type: 'rendered', target: ULElement }

你也可以在回调里面传入其他东西，使用$event代表事件对象

  1. <ul>
  2.    <li ms-for="el in @arr" data-for-rendered="@fn('xxx',$event)">{{el}}</li>
  3. <ul>

如果你想截取数组的一部分出来单独循环,可以用limitBy过滤器, 使用as来引用新数组

  1. <ul>
  2.     <li ms-for="el in @aaa | limitBy(10) as items">{{el}}</li>
  3. </ul>

上例是显示数组的前10个元素, 并且将这10个元素存放在items数组中, 以保存过滤或排序结果

使用注释节点实现循环,解决同时循环多个元素的问题

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>TODO supply a title</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <script src="../dist/avalon.js"></script>
  8.         <script>
  9.             vm = avalon.define({
  10.                 $id: 'for4',
  11.                 arr: [1, 2, 3, 4]
  12.             })
  13.         </script>
  14.     </head>
  15.     <body>
  16.         <div ms-controller='for4'  >
  17.             <!--ms-for: el in @arr-->
  18.             <p>{{el}}</p>
  19.             <p>{{el}}</p>
  20.             <!--ms-for-end:-->
  21.         </div>
  22.     </body>
  23. </html>

avalon 不需要像angular那样要求用户指定trace by或像react 那样使用key属性来提高性能,内部帮你搞定一切

如果你只想循环输出数组的其中一部分,请使用filterBy,只想循环输出对象某一些键值并设置默认值,则用selectBy. 不要在同一个元素上使用ms-for与ms-if,因为这样做会在页面上生成大量的注释节点,影响页面性能

可用于ms-for中的过滤器有limitBy, filterBy, selectby, orderBy

ms-for支持下面的元素节点继续使用ms-for,形成双重循环与多级循环, 但要求双重循环对应的二维数组.几维循环对应几维数组

  1. vm.array = [{arr: [111,222, 333]},{arr: [111,222, 333]},{arr: [111,222, 333]}]
  2. <p>array的元素里面有子数组,形成2维数组</p>        
  3. <ul>
  4.     <li ms-for="el in @array"><div ms-for='elem in el.arr'>{{elem}}</div></li>
  5. </ul>

如何双向绑定ms-for中生成的变量?

由于 循环生成的变量前面不带@, 因此就找不到其对应的属性,需要特别处理一下

  1. <div ms-controller="test">
  2. <div ms-for="(key,el) in @styles">
  3.         <label>{{ key }}::{{ el }}</label>
  4.         <input type="text" ms-duplex="@styles[key]" >
  5.         <!--不能ms-duplex="el"-->
  6.     </div>
  7. </div>
  9. <script type="text/javascript">
  10.     var root = avalon.define({
  11.         $id: "test",
  12.         styles: {
  13.             width: 200,
  14.             height: 200,
  15.             borderWidth: 1,
  16.             borderColor: "red",
  17.             borderStyle: "solid",
  18.             backgroundColor: "gray"
  19.         }
  20.     })
  25. </script>

过滤器可以到这里获取详情