xtemplate 中的循环语法

数组遍历

比如有个菜单,对应的数据是一个数组,{list:["女装","男装","童装"]},模板内容如下:

<ul>
    {{#each(list)}}
        <li>{{this}}</li>
    {{/each}}
</ul>

使用each块状命令,可以遍历一个数组。{{this}}变量指向当前索引的值。

有时我们需要获取遍历当前的索引值,如何处理呢?

<ul>
    {{#each(list)}}
        <li>{{xindex}}.{{this}}</li>
    {{/each}}
</ul>

通过{{xindex}}可以获取索引值,从0开始。

this和xindex我们称之为xtemplate的关键字,数据Object字段定义时键名请避免使用。

xtemplate的强大之处在于很多js的原生方法可以在模板中使用,比如数组的方法。

<ul>
    {{#each(list.slice(1))}}
        <li>{{xindex}}.{{this}}</li>
    {{/each}}
</ul>

但是严重不建议在模板上编写太复杂的业务逻辑(有些模板过于强大,强大到可以在模板里面直接写js逻辑),这样很容易引起混乱,而且模板也不利于维护。

遍历二维数据

比如菜单数据:{list:[{"name":"女装","link":"http://xxx"},{"name":"男装","link":"http://xxx"},{"name":"童装","link":"http://xxx"}]}。

对应模板如下:

<ul>
    {{#each(list)}}
        <li><a href="{{link}}">{{name}}</a></li>
    {{/each}}
</ul>

无须使用{{this.name}} ,直接使用键名就可以获取字段数据。

问题来了,如果想要获取list级别的数据呢?

比如数据:{title:"kissy",list:[{"name":"女装","link":"http://xxx"},{"name":"男装","link":"http://xxx"},{"name":"童装","link":"http://xxx"}]}

each中需要用到 title 数据。

root 关键字

可以通过root关键字,获取数据根层(上面的demo中指list字段这一层)。

<ul>
    {{#each(list)}}
        <li><a href="{{link}}">{{name}}</a> {{root.title}}</li>
    {{/each}}
</ul>

问题又来了,如果数据结构非常复杂,我们要获取的数据位于list上一层,但不在root层呢?

相对引用

<ul>
    {{#each(list)}}
        <li><a href="{{link}}">{{name}}</a> {{../title}}</li>
    {{/each}}
</ul>

可以使用 ../ 来获取上一层的数据。

遍历对象

假设我们要遍历的数据,不是数组,而是对象,如何处理呢?

比如数据:{"data":{"x":1,"y":2}}。

{{#with(data)}}
{{x}}+{{y}}={{x+y}}
{{/with}}