在循環轉把中的物品時向{{@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}}添加偏移

回答

相關問題