在车把模板中,如何仅使用模板将单选按钮组设置为正确的值?可以直接在模板中完成吗?
例如,假设有一个单选按钮组,如下所示:
<label><input type="radio" name="mode" value="auto">Auto</label><br>
<label><input type="radio" name="mode" value="on">On</label><br>
<label><input type="radio" name="mode" value="off">Off</label><br>
进入模板的数据具有mode值:
{mode: "on"}
在模板扩展之后,我想以此结束:
<input type="radio" name="mode" value="auto">Auto<br>
<input type="radio" name="mode" value="on" checked>On<br>
<input type="radio" name="mode" value="off">Off<br>
因此,表单中的HTML最初会显示所选的“on”值。
最佳答案
您可以编写一个辅助函数来帮助您解决此用例。我喜欢将所有块帮助程序保存在指定的JS文件中-但您可以将它们放在脚本中的任何位置。
Handlebars.registerHelper ("setChecked", function (value, currentValue) {
if ( value == currentValue ) {
return "checked";
} else {
return "";
}
});
在模板中,您可以像这样使用它:
<label><input type="radio" name="mode" value="auto" {{{setChecked auto mode}}}>Auto</label><br>
<label><input type="radio" name="mode" value="on" {{{setChecked on mode}}}>On</label><br>
<label><input type="radio" name="mode" value="off" {{{setChecked off mode}}}>Off</label><br>
这应该工作。
此链接是阻止助手的一个很好的起点:http://handlebarsjs.com/block_helpers.html