循环绑定

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

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

    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方法的回调参数一致。

    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代表事件对象

    如果你想截取数组的一部分出来单独循环,可以用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>
    6.         <script src="../dist/avalon.js"></script>
    7.         <script>
    8.             vm = avalon.define({
    9.                 $id: 'for4',
    10.                 arr: [1, 2, 3, 4]
    11.             })
    12.         </script>
    13.     </head>
    14.     <body>
    15.         <div ms-controller='for4'  >
    16.             <!--ms-for: el in @arr-->
    17.             <p>{{el}}</p>
    18.             <p>{{el}}</p>
    19.             <!--ms-for-end:-->
    20.         </div>
    21.     </body>
    22. </html>

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

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

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

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

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

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

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