循环遍历Handlebars中的项目时,向{{@index}}添加偏移量

Question

我正在使用内置帮助器迭代Handlebars中的列表each.在每个块中,我引用当前循环索引 {{@index}}来打印项目的连续编号:

<script id="list-item-template" type="text/x-handlebars-template">
    {{#each items}}
    <li class="topcoat-list__item">
        <a href="#{{@index}}">Item number {{@index}}</a>
    </li>
    {{/each}}
</script>

这给出了以下输出:

• 料号0
• 项目编号1
• 商品编号2
• ....

问题是我想显示一个以1而不是0开头的偏移索引.

我试图对索引执行计算{{@index+1}},但这只会导致一个

未捕获的错误:解析错误

Answer 1

Handlebars让您可以编写一个处理这种情况的自定义帮助程序,例如一个帮助函数,可以让您对加法和减法等表达式执行计算.

下面的函数注册一个新的帮助器,它只是将值递增1:

var Handlebars = require('handlebars');

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

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

{{inc @index}}

Answer 2

实际答案：https：//stackoverflow.com/a/46317662/1549191

注册数学把手并执行所有数学运算。

app.engine('handlebars', exphbs({
  helpers:{
    // Function to do basic mathematical operation in handlebar
    math: function(lvalue, operator, rvalue) {lvalue = parseFloat(lvalue);
        rvalue = parseFloat(rvalue);
        return {
            "+": lvalue + rvalue,
            "-": lvalue - rvalue,
            "*": lvalue * rvalue,
            "/": lvalue / rvalue,
            "%": lvalue % rvalue
        }[operator];
    }
}}));
app.set('view engine', 'handlebars');

然后，您可以在视图中直接执行操作。

    {{#each myArray}}
        <span>{{math @index "+" 1}}</span>
    {{/each}}

Answer 3

我相信你可以用...

{{math @index "+" 1}}

Answer 4

为了扩展 Mobiletainment 的答案，该解决方案允许将值递增作为参数传入。如果未传递任何值，则使用默认值 1。

Handlebars.registerHelper('inc', function(number, options) {
    if(typeof(number) === 'undefined' || number === null)
        return null;

    // Increment by inc parameter if it exists or just by one
    return number + (options.hash.inc || 1);
});

然后您可以在模板中编写：

{{inc @index inc=2}}