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

Handlebars.js custom helper to count nested elements

本文关键字：计算 嵌套 元素 帮助程序 js 自定义 Handlebars      更新时间：2023-09-26

我想制作一个自定义帮助程序，根据答案的数量给{{count}}一个递增的数字。我在获取正确的方程式和构建助手时遇到了问题。我曾多次尝试使用父{{@index}}和嵌套{{@index}}的值，但都没有成功。

这样做的目的是在每个问题下呈现一个表格，并用单选按钮选择每个答案。我需要input标签上的ID属性和label标签上的for属性上的各个ID都相同。Thx。

注意，其他属性（name、value等）已经正确编程，所以我在这个例子中给出了thm硬值。

{{#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]

使用registerHelper方法添加单个增量计数器

<script type="text/template" id="template">
    {{#each questions}}
    <div class="question-{{@index}}">
      {{#each answers}}
      <div class="answerswer-{{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

我的解决方案：

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

相关文章：