javascript - doT.js 每 3 次迭代做一些事情

Question

我有一个看起来像这样的 doT.js 模板:

{{?it.books.length }}
{{~it.books :value}}
<li>
    <article class='Teaser'>
        <a href='{{=value.url}}' title='{{=value.title}}'>
            <img src='{{=value.image}}' />
        </a>
        <h3>
            <a href='{{=value.url}}' title='{{=value.title}}'>{{=value.title}}</a>
        </h3>
    </article>
</li>
// this should only be rendered every 3rd time
<br class='clear' />
{{~}}
{{?}}

最后的 br-Tag 只应该每三次渲染一次。我该怎么做？

Answer 1

试试这个:

{{?it.books.length }}
{{~it.books :value:index}}
<li>
    <article class='Teaser'>
        <a href='{{=value.url}}' title='{{=value.title}}'>
            <img src='{{=value.image}}' />
        </a>
        <h3>
            <a href='{{=value.url}}' 
                title='{{=value.title}}'>{{=value.title}}</a>
        </h3>
    </article>
</li>
{{? index % 3 == 2 }}
<br class='clear' />
{{?}}
{{~}}
{{?}}

如果你想避免在列表的末尾添加元素(当集合的长度被 3 整除时发生)，替换

{{? index%3 == 2 }}

与

{{? it.books.length-1 != index && index % 3 == 2 }}