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

Question

我正在使用内置的each帮助器在 Handlebars 中迭代列表。 在每个块中，我引用当前循环索引 {{@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}}

Answer 5

我通过在我的手柄代码底部添加一个简短的脚本标记来解决这个问题！

在你调用@index的地方添加一个类，然后下面的jQuery代码可以工作（也可以使用vanilla JS完成）。

<p class="create_index">
     {{@index}}
</p>
<script>
    $(".create_index").text(parseInt($(".create_index").text())+1)
</script>

编辑4/28 - 这已经改为使用vanilla JS以获得更好的向后兼容性（即IE7,8）：

<span class="create_index"></span>
<script>
    var divs = document.querySelectorAll('.create_index');
    for (var i = 0; i < divs.length; ++i) {
        divs[i].innerHTML = i + 1;
    }
</script>

document.querySelectorAll具有很好的兼容性，但也可能是document.getElementsByClassName("create_index")

Answer 6

handlebars-helpers 库在 lib /中有一个相当全面的数学库math.js ，包括通用 {{add ab}} 帮助器，定义如下：

＆＃xA;＆＃xA;＆＃xA;＆＃xA;

  / **＆＃xA; *返回加号b的产品。＆＃xA; *＆＃XA; * @param {Number} a＆＃xA; * @param {Number} b＆＃xA; * @api public＆＃xA; * /＆＃xA; helpers.add = function（a，b）{＆＃xA;返回a + b;＆＃xA;};＆＃xA;  

＆＃xA;＆＃xA;

如果你不想将它复制并粘贴到你的项目中，那么你有可能使用 npm ，你可以得到如下依赖：

＆＃xA;＆＃xA;

npm install handlebars-helpers --save

＆＃xA;＆＃xA;

然后，您可以按如下方式注册数学助手：

＆＃xA;＆＃xA;

  const handlebars = require（'handlebars'），＆＃xA; handlebarsHelpers = require（'handlebars-helpers'）;＆＃xA;＆＃xA; handlebarsHelpers.math（{＆＃xA; handlebars：handlebars＆＃xA;}）;＆＃xA;  

＆ #xA;

Answer 7

为了提高开发服务器的准确性，请使用此

var hbs=require('express-handlebars')

var app = express();

app.set('view engine', 'hbs');

app.engine('hbs', hbs({
    helpers: {
        inc: function (value, options) {
            return parseInt(value) + 1;
        }
    },
    extname: 'hbs',
    defaultLayout: 'layout',
    layoutsDIR: __dirname + '/views/layout/',
    partialsDIR: __dirname + '/views/partials/'
}))

这部分创建了一个名为 inc 的函数，用于将 {{@index}} 的值增加一

app.engine('hbs', hbs({

    helpers: {

        inc: function (value, options) {

            return parseInt(value) + 1;

        }
    },

我们可以像这样 {{inc @index}} 使用 inc 函数和 {{@index}}

在这里，我包含了我在 glitch.com 中托管的一个项目的屏幕截图，链接如下

https://library-management-system-joel.glitch.me/view-books

（此项目正在建设中）

感谢 Mobiletainment 和 Drkawashima

Answer 8

将我的解决方案放在这里。 CSS counters。

find . -name '*.txt' -exec grep 'stuff' {} +
find . -name '*.txt' -exec sed  'stuff' {} +
find . -name '*.txt' -exec awk  'stuff' {} +

我一直坚持下去，与添加新的助手相比，这是一个更好的解决方案。

Answer 9

我正在使用nodejs和express-handlebars作为模板引擎，并且遇到相同的问题。这就是我设法解决的方法。

您可以在其中创建一个文件夹和一个js文件，您可以在其中创建自己的自定义帮助程序，该帮助程序获取索引并返回将其递增1的信息。

module.exports = {
    formatIndex: function(index)  {
        return index+1;
    }
}

请记住在您的应用程序（以我为例app.js）中注册助手。我使用过快速车把，所以我以这种方式寄宿于助手：

app.engine('handlebars', exphbs({defaultLayout: 'home', helpers: { formatIndex }}));

注意：您必须在注册之前导入formatIndex。

然后，您可以在视图中以如下方式使用它：

{{#each assignments}}
     <div>{{formatIndex @index }}</div>
{{/if}}

Answer 10

有一种简便的方法来激发{{@index}}值。

解决方案是调用该函数并传递@index值，然后在JS上使用助手返回@index + 1

这是去

{{incitement @index}}

这是js的代码

Handlebars.registerHelper("incitement", function (inindex) {
  return inindex + 1
});