在handlebars模板中,如何仅使用模板将单选按钮组设置为正确的值?这可以直接在模板中完成吗?
例如,假设有一个单选按钮组,如下所示:
<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: "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“值。
发布于 2014-09-27 04:01:33
您可以编写一个helper函数来帮助您处理此用例。我喜欢把我所有的块助手保存在一个指定的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
发布于 2017-04-04 19:58:24
对于任何其他想要添加相同内容的人来说,这是有效的(引号、未定义的值和全部):
Handlebars.registerHelper('checked', function(value, test) {
if (value == undefined) return '';
return value==test ? 'checked' : '';
});
假设一个带有输入名称的变量被传递给Handlebar上下文,它的用法如下:
<input type="radio" name="mode" value="auto" {{checked mode 'auto'}}>Auto<br>
<input type="radio" name="mode" value="on" {{checked mode 'on'}}>On<br>
<input type="radio" name="mode" value="off" {{checked mode 'off'}}>Off<br>
或者..。
如果您不喜欢在每个输入中都有helper调用,您可以将输入包装在一个helper中,如下所示:
Handlebars.registerHelper('checked', function(value, options) {
const div = document.createElement('div'); // create a container div
div.innerHTML = options.fn(this); // parse content into dom
div.querySelectorAll('input[type=radio]').forEach(function(input) {
// if input has value matching supplied value, check it
if (input.value == value) input.defaultChecked = true;
});
return div.innerHTML;
});
然后将按如下方式使用它:
{{#checked mode}}
<input type="radio" name="mode" value="auto">Auto<br>
<input type="radio" name="mode" value="on">On<br>
<input type="radio" name="mode" value="off">Off<br>
{{/checked}}
注复选框需要一种略有不同的方法,因为它们可以设置多个值。
请记住,帮助器优先于上下文变量,因此如果您有一个名为“checked”的输入,则必须使用路径引用,例如{{./checked}}
。
发布于 2018-06-02 05:34:39
一旦我理解了ChrisV的答案,我真的很喜欢它。我真的费了好大劲才从这里赶到那里。请认为这是对上述答案的支持评论。我会说我的用例有点不同。我正在使用Express,并且我想从路由设置复选框。我并不完全清楚如何调用helper函数。显然,我使用的是两个不同的单选按钮组。
在app.js中,我最初在这里设置视图引擎
var hbs = require('hbs');
hbs.registerPartials(__dirname + '/views/partials');
hbs.registerHelper('checked', function (value, test) {
if (value == undefined) return '';
return value == test ? 'checked' : '';
});
app.set('view engine', 'hbs');
我在index.js中设置了路由
var express = require('express');
var router = express.Router();
router.get('/display_form', function (req, res, next) {
//... play with data. use req.query.optionsRadiosA, etc...
// var outputA = "video"
res.render('formpage', {
title: 'Setup Page',
optionsRadiosA: outputA, // use variable
optionsRadiosB: 'Audio' // or use string
});
});
最后,我的模板,formpage.hbs (摘录显示...)
<h1>{{title}}</h1>
<form class="pure-form">
<h2>Channel A Setup</h2>
<label for="option-A1">
<input id="option-A1" type="radio" name="optionsRadiosA" value="Video" {{checked optionsRadiosA 'Video'}}> Video
</label>
<label for="option-A2">
<input id="option-A2" type="radio" name="optionsRadiosA" value="Audio" {{checked optionsRadiosA 'Audio'}}> Audio
</label>
<h2>Channel B Setup</h2>
<label for="option-B1">
<input id="option-B1" type="radio" name="optionsRadiosB" value="Video" {{checked optionsRadiosB 'Video'}}> Video
</label>
<label for="option-B2">
<input id="option-B2" type="radio" name="optionsRadiosB" value="Audio" {{checked optionsRadiosB 'Audio'}}> Audio
</label>
<input type="submit" value="Update the Channel Feeds">
</form>
https://stackoverflow.com/questions/26066768
复制相似问题