循环遍历
下面介绍mustache.js的方式和javascript遍历的方式。
### 方式一
```js
class List extends Omi.Component {
constructor(data) {
super(data);
}
render () {
return `
{{#items}}
- {{text}}
{{/items}}
`;
}
}
Omi.render(new List({
items: [
{id: 1, text: 'Omi'},
{id: 2, text: 'dntzhang'},
{id: 3, text: 'AlloyTeam'}
]
}),"body");
```
mustache.js更详细的循环遍历使用可看[https://github.com/janl/mustache.js#non-empty-lists](https://github.com/janl/mustache.js#non-empty-lists)。 比如还支持：
* 如果items的每一项是字符串，可以直接**{{.}}**的方式来输出每一项
* 循环的时候调用定义好的函数
点击这里→在线试试
### 方式二
既然ES6+了，当然可以使用${ }以及Array的map方法:
```js
class List extends Omi.Component {
constructor(data) {
super(data);
}
render() {
return `
${this.data.items.map(item =>
`- ${item.text}
`
).join('')}
`;
}
}
Omi.render(new List({
items: [
{id: 1, text: 'Omi'},
{id: 2, text: 'dntzhang'},
{id: 3, text: 'AlloyTeam'}
]
}),"body");
```
你将在页面看到如下效果:
点击这里→在线试试
如果想在循环里加些判断呢？比如需要把id为偶数的隐藏起来:
```js
render() {
return `
${this.data.items.map(item =>
`- ${item.text}
`
).join('')}
`;
}
```
所以模板字符串还是非常方便，随着ES继续发展下去，模板引擎估计会慢慢消失。所以omi提供了 omi.lite.js 版本不包含任何模板引擎。