我想制作一个自定义帮助程序,根据答案的数量给{{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="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
我的解决方案:
{{#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等等…