Omi 循环遍历

下面介绍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的每一项是字符串，可以直接{{.}}的方式来输出每一项
• 循环的时候调用定义好的函数

点击这里→在线试试

方式二

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");
 
 
 

当然你也可以在map里面也使用template string

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

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

点击这里→在线试试

转载本站内容时，请务必注明来自W3xue，违者必究。