Handlebars 模板 - 添加递增变量的最佳方式

Question

我想使用 Handlebars 模板在 table 中添加一个计数器。我有一个像这样的 Handlebars 模板：

<script type="text/template" id="user-home-main-table-template">

    <% var i=0 %>
    <table class="table">
        <thead>
        <tr>
            <th>#</th>
            <th>Team Name</th>
            <th>Club</th>
            <th>Sport</th>
            <th>Delete?</th>
        </tr>
        </thead>
        <tbody>
        {{#teams}}
        <tr>
            <td><%=i%></td>
            <td>{{teamName}}</td>
            <td>{{club}}</td>
            <td>{{sport}}</td>
            <td>delete</td>
        </tr>
        {{/teams}}
        </tbody>
    </table>
</script>

这有效，但变量 i 没有递增，解决这个问题的最佳方法是什么？

Answer 1

在 Handlebars 中，您可以像这样访问当前循环的索引：

{{#each array}}
  {{@index}}: {{this}}
{{/each}}

其中 {{@index}} 将评估当前迭代。例如：0、1、2 等

您可以在此处找到更多文档：http://handlebarsjs.com/builtin_helpers.html#iteration

希望对您有所帮助。

Answer 2

您可以使用{{@index}}访问当前索引

{{#each array}}
  {{@index}}: {{this}}
{{/each}}

但是这个 index 将以 0 开头，有时您可能不想要。

在这种情况下，您可以创建并注册辅助方法来增加索引。

Handlebars.registerHelper("inc", function(value, options)
{
    return parseInt(value) + 1;
});

然后您可以使用 inc 关键字在车把表达式中使用它，例如：

{{inc @index}}

但如果您不想这样做，还有另一种更简单的方法可以达到同样的效果。

{{@index_1}}

试一试。

Handlebars 模板 - 添加递增变量的最佳方式

Handlebars template - best way to add incrementing variable

templates

handlebars.js