渲染列表

可以使用repeat指令渲染基于Array或Object数据格式的列表，也要以根据一个number值作为重复渲染的次数。

语法

• -repeat="item in array"
• -repeat="item,index in array"
• -repeat="value in object"
• -repeat="value,key in object"
• -repeat="value in number"

示例

<ul>
   <li drunk-repeat="user,idx in list">
     <span drunk-class="{dark: $odd, light: $even}">
        NO.{{idx + 1}} -- {{user}}
     </span>
   </li>
</ul>

new drunk.Component({
 list = [
   'Todd',
   'Fon',
 ];
}).$mount(document.body);

会渲染为：

<ul>
  <li>
    <span class="dark">NO.1 -- Todd</span>
  <li>
  <li>
    <span class="light">NO.2 -- Fon</span>
  <li>
</ul>

repeat指令可以访问以下几个内置的属性，方便开发：

• $odd 是否是第偶数个item
• $even 是否是第奇数个item
• $first 是否是第一个item
• $last 是否是最后一个item

repeat指令有独立的作用域，所以user和idx属性和几个内置的属性并不会使用同一个引用，而且它可以访问父级的作用域，所以访问父级的属性和方法也是可以的。

使用数据过滤器

数据过滤器在repeat指令中也是支持的，表达式为-repeat="item,key in list|filter"，只是这里的过滤器处理顺序有些不同，repeat指令的过滤器是先对数据进行处理，再进行遍历操作。

<label>输入年龄筛选出该年龄以上的用户</label>
<input type="number" drunk-model="age">
<div drunk-repeat="user in userList|filterByAge:age">{{user.name}}</div>

class App extends drunk.Component {
  age = 0;
  userList = [
    {name: 'Todd', age: 28},
    {name: 'Fon', age: 24},
    {name: 'Jim', age: 15}
  ]
  init() {
    this.$setFilters({
      filterByAge(list, age) {
        return list.filter(item => item.age >= age);
      }
    });
  }
}

当age的值改变时，会触发更新通知，repeat指令会先把userList数据使用过滤器进行处理得到一个新的数组，再根据这个新的数组进行遍历渲染。