在循环转把中的物品时向{{@index}}添加偏移

我在使用内置each帮助程序的转把中进行迭代。内的每个块，我引用电流环路索引{{@index}}打印的项的连续数：在循环转把中的物品时向{{@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}}对指数进行计算开始的抵消指数，但这只是导致一个

Uncaught Error: Parse error

来源

2014-02-28 Mobiletainment

Handlebars为您提供了编写处理这种情况的自定义帮助程序的可能性，例如一个辅助功能，可以让你像加法和减法表达式执行计算等

以下函数注册一个新的帮手，它只是增加值按1：

var Handlebars = require('handlebars'); 

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

然后，您可以车把内使用表达式使用inc关键字，如：

{{inc @index}}

来源

2014-02-28 19:19:01 Mobiletainment

但你把帮手放在哪里？ –

@Cameron Sima在脚本标记或页面上的JS文件中，Handlebars加载后 – sricks

谢谢Mobiletainment！你可以给任何参考/解决方案，所以我可以写它像'aria-label =“{{_ ariaLabel}} {{inc @index'+'1}}”' – KunJ

我相信你可以使用...

{{math @index "+" 1}}

来源

2014-10-13 22:22:27

必须执行，请参阅：http：/ /jsfiddle.net/mpetrovich/wMmHS/ –

谢谢Adam！你能给我提供任何参考/解决方案，所以我可以这样写：''aria-label =“{{_ ariaLabel}} {{math @index'+'1}}” – KunJ

要扩展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}}

来源

2015-10-28 19:02:49 masterwok

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

/** 
* 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

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

const handlebars = require('handlebars'), 
    handlebarsHelpers = require('handlebars-helpers'); 

handlebarsHelpers.math({ 
    handlebars: handlebars 
});

来源

2016-09-20 07:21:03

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

添加一个类，无论你在哪里调用@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")

来源

2017-03-29 22:09:27 Max

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

注册数学手柄和pe改变所有的数学运算。

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

来源

2017-09-20 09:03:17

在循环转把中的物品时向{{@index}}添加偏移

回答

相关问题