omi/docs/cn_loop.md

循环遍历

下面介绍mustache.js的方式和javascript遍历的方式。

方式一

class List extends Omi.Component {
    constructor(data) {
        super(data);
    }

    render () {
        return `<div>
                    <ul> 
                        {{#items}} 
                        <li id="{{id}}">{{text}}</li> 
                        {{/items}}
                    </ul>
                </div>`;
    }
}

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。 比如还支持：

• 如果items的每一项是字符串，可以直接**{{.}}**的方式来输出每一项
• 循环的时候调用定义好的函数

点击这里→在线试试

方式二

既然ES6+了，当然可以使用${ }以及Array的map方法:

class List extends Omi.Component {
    constructor(data) {
        super(data);
    }

    render() {
        return `<div>
                    <ul>
                    ${this.data.items.map(item =>
                         `<li id="${item.id}">${item.text}</li>`
                    ).join('')}
                    </ul>
                </div>`;
    }
}

Omi.render(new List({
    items: [
        {id: 1, text: 'Omi'},
        {id: 2, text: 'dntzhang'},
        {id: 3, text: 'AlloyTeam'}
    ]
}),"body");

你将在页面看到如下效果:

点击这里→在线试试

如果想在循环里加些判断呢？比如需要把id为偶数的隐藏起来:

render() {
    return `<div>
                <ul>
                ${this.data.items.map(item =>
                    `<li style="display:${item.id%2===0?'none':'block'};" id="${item.id}">${item.text}</li>`
                ).join('')}
                </ul>
            </div>`;
}

所以模板字符串还是非常方便，随着ES继续发展下去，模板引擎估计会慢慢消失。所以omi提供了 omi.lite.js 版本不包含任何模板引擎。