循环移动Handlebars中的项目时,将偏移量添加到{{@index}}

我正在使用内置的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}}这样的索引上进行计算,但是这只会导致一个

未捕获的错误:parsing错误

把手让你有可能编写一个处理这种情况的自定义助手,例如一个助手函数,它可以让你对加减等expression式进行计算。

在函数下面注册一个新的帮助器,它简单地将一个值递增1:

 var Handlebars = require('handlebars'); Handlebars.registerHelper("inc", function(value, options) { return parseInt(value) + 1; }); 

然后,您可以使用inc关键字在句柄expression式中使用它,如:

 {{inc @index}} 

我相信你可以使用…

 {{math @index "+" 1}} 

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

添加一个类,无论你在哪里调用@index,然后下面的jQuery代码工作(也可以使用香草JS)。

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

编辑4 / 28-这已经改变使用香草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")

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

注册math手柄并执行所有math运算。

 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}} 

为了扩展Mobiletainment的答案,这个解决scheme允许将值作为参数递增。 如果没有值传递,则使用默认值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}} 

handlebars-helpers库在lib/math.js有一个相当丢掷的math库,包括一个通用的{{add ab}}助手,定义如下:

 /** * Return the product of a plus b. * * @param {Number} a * @param {Number} b * @api public */ helpers.add = function(a, b) { return a + b; }; 

如果你不想复制/过去这个到你的项目,你有可能使用npm ,你可以得到这种依赖如下:

npm install handlebars-helpers --save

然后,你可以注册math助手如下:

 cont handlebars = require('handlebars'), handlebarsHelpers = require('handlebars-helpers'); handlebarsHelpers.math({ handlebars: handlebars });