如何在手柄模板中的單選按鈕組中設置所選項目？

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最初顯示選中的“on”值。

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

我自己的解決方案是：

幫手：

Handlebars.registerHelper ("setRadio", function (value, options) {
    var $el = $(options.fn(this));
    if ( value == $el.val() ) {
       return $el.attr("checked", "checked")[0].outerHTML;
    } else {
       return options.fn(this);
    }

模板中的用法：

            {{#setRadio stars}}<input class="star-rating__input" id="{{id}}-star-rating-5" type="radio" name="{{id}}" value="5" >{{/setRadio}}
            <label class="star-rating__ico fa fa-star-o fa-lg" for="{{id}}-star-rating-5" title="5 out of 5 stars"></label>

            {{#setRadio stars}}<input class="star-rating__input" id="{{id}}-star-rating-4" type="radio" name="{{id}}" value="4">{{/setRadio}}
            <label class="star-rating__ico fa fa-star-o fa-lg" for="{{id}}-star-rating-4" title="4 out of 5 stars"></label>

            {{#setRadio stars}}<input class="star-rating__input" id="{{id}}-star-rating-3" type="radio" name="{{id}}" value="3">{{/setRadio}}
            <label class="star-rating__ico fa fa-star-o fa-lg" for="{{id}}-star-rating-3" title="3 out of 5 stars"></label>

            {{#setRadio stars}}<input class="star-rating__input" id="{{id}}-star-rating-2" type="radio" name="{{id}}" value="2">{{/setRadio}}
            <label class="star-rating__ico fa fa-star-o fa-lg" for="{{id}}-star-rating-2" title="2 out of 5 stars"></label>

            {{#setRadio stars}}<input class="star-rating__input" id="{{id}}-star-rating-1" type="radio" name="{{id}}" value="1">{{/setRadio}}
            <label class="star-rating__ico fa fa-star-o fa-lg" for="{{id}}-star-rating-1" title="1 out of 5 stars"></label>