Question

在手柄模板中，如何仅使用模板将单选按钮组设置为正确的值？这可以直接在模板中完成吗？

举个例子，让我们说有一个这样的单选按钮组：

<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最初会显示＆＃34; on＆＃34;正在选择价值。

Answer 1

您可以编写帮助函数来帮助您使用此用例。我喜欢将所有块助手保存在指定的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

Answer 2

对于其他任何想要相同的人来说，这是有用的：这有用（引号，未定义的值和所有）：

Handlebars.registerHelper('checked', function(value, test) {
    if (value == undefined) return '';
    return value==test ? 'checked' : '';
});

假设一个带有输入名称的变量传递给Handlebars上下文，它用作：

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

...替代地

如果你不喜欢在每个输入中调用帮助器，你可以将输入包装在一个帮助器中，如下所示：

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}}。

Answer 3

一旦我明白了，我真的很喜欢ChrisV的答案。我真的很难从这里到达那里。请将此视为对上述答案的支持性评论。我会说我的用例有点不同。我正在使用Express，我想从路线中设置复选框。对我来说，如何调用辅助函数并不完全清楚。显然，我使用了两种不同的单选按钮分组。

在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>

Answer 4

我自己的解决方案是：

助手：

it = iter(list_2)
res = [[next(it) for _ in range(take)] for take in list_1]

模板中的用法：

import itertools


res = [list(itertools.islice(list_2, take)) for take in list_1]
print(res)  # -> [[1], [2, 3], [4, 5]]

如何在手柄模板中的单选按钮组中设置所选项目？

4 个答案: