DEMO

Question

我想制作一个自定义助手，根据答案数量为{{count}}提供增加数字的值。我在找到正确的方程式并构建帮助程序时遇到了麻烦。我曾多次尝试使用父{{@index}}和嵌套{{@index}}的值无效。

这样做的目的是使用单选按钮在每个问题下呈现一个表单以选择每个答案。我需要ID标记上的input属性和for标记上的label属性的个人ID相同。 THX。

注意其他属性（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

使用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

Answer 2

我的解决方案：

{{#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等......

Handlebars.js自定义帮助程序来计算嵌套元素

2 个答案:

DEMO