Handlebars.js自定義幫助程序對嵌套元素進行計數

Question

我想根據答案的數量制定一個自定義幫助程序，以便爲{{count}}增加一個數字的值。我很難得到正確的方程並建立幫手。我有幾次嘗試使用父代{{@index}}和嵌套{{@index}}的值無濟於事。

這樣做的目的是通過單選按鈕在每個問題下呈現一個表單來選擇每個答案。我需要input標記上的ID屬性和label標記上的for屬性上的單個ID相同。謝謝。

注意其他屬性（name,value等）已被正確編程，因此我在此示例中給出了硬性值。

{{#questions}} 
<div class="question-{{@index}}"> 
    <form> 
    {{#each answers}} 
    <div> 
     <input type="radio" name="radios[0]" id="radios-{{count}}" value="1"> 
     <label for="radios-{{count}}">Answer 1</label> 
    </div> 
    {{/each}} 
    <form> 
</div> 
{{/questions}} 

Desired output in plain text class names: 

div.question-0 
    div 
     input#radios-0 
     label[for=radios-0] 
    div 
     input#radios-1 
     label[for=radios-1] 
div.question-1 
    div 
     input#radios-2 
     label[for=radios-2] 
    div 
     input#radios-3 
     label[for=radios-3] 
    div 
     input#radios-4 
     label[for=radios-4] 
div.question-2 
    div 
     input#radios-5 
     label[for=radios-5] 
    div 
     input#radios-6 
     label[for=radios-6] 

Answer 1

我的解決辦法：

{{#questions}} 
{{questionIndex @index}} 
<div class="question-{{@index}}"> 
    <form> 
    {{#each answers}} 
    <div> 
     <input type="radio" name="radios[{{../questionIndex}}]" id="radios-{{../questionIndex}}{{@index}}" value="{{value}}"> 
     <label for="radios-{{../questionIndex}}{{@index}}">{{answer}}</label> 
    </div> 
    {{/each}} 
    <form> 
</div> 
{{/questions}} 

Handlebars.registerHelper('questionIndex', function(value) { 
    this.questionIndex = Number(value); 
}); 

{{../questionIndex}}{{@index}}將導致：00，01，10，11， 20，21等等......

Answer 2

使用registerHelper方法添加單個遞增計數器

<script type="text/template" id="template"> 
    {{#each questions}} 
    <div class="question-{{@index}}"> 
     {{#each answers}} 
     <div class="answer-{{count}}"></div> 
     {{/each}} 
    </article> 
    {{/each}} 
</script> 
<script type="text/javascript"> 
    var inputdata = { 
     questions: [ 
      { answers: [2,3,4,5] }, 
      { answers: [1, 2,3,4,5] } 
     ] 
    }; 
    var Counter = 1; 
    Handlebars.registerHelper('count', function() { 
     return Counter ++; 
    }); 

    var template = Handlebars.compile($("#template").html());  
    $("body").html(template(inputdata)); 
</script>  

DEMO