如何使用 Handlebars 将输入名称属性设置为等于变量？

Question

我是 Handlebars.js 的新手，我正在尝试弄清楚如何根据我的 JS 中定义的变量在单选按钮上命名属性。

下面的代码目前给出了我想要的输出，但我想根据变量的值将 name 属性设置为不同的名称。例如，如果变量号设置为 4，我希望所有输入的名称为 'answer4'.

一些额外的背景信息：number 变量在 quiz 函数中设置为参数，即 quiz("quizJSONFile", number);我使用数字来定义要将测验问题和答案附加到哪些 html 元素。

HTML:

<script id="radio-template" type="x-handlebars-template">
    {{#each this}}
        <input name='answer' type='radio' value='{{@index}}' >{{this}}<br>
    {{/each}}
</script>

JS:

function createRadios(){
var radioScript = $("#radio-template").html();
var template = Handlebars.compile(radioScript);
 $("#question").append(template(allQuestions[counter].choices));
};

JSON:

var allQuestions = [{
  question: "How many presidents were members of the Whig party?",
  choices: ["Four", "Three", "Two"],
  correct: 0
}, {
  question: "Who was the first president to be impeached?",
  choices: ["Andrew Jackson", "Andrew Johnson", "Warren Harding"],
  correct: 1
}, {
  question: "How many presidents died during their presidency?",
  choices: ["Four", "Six", "Eight"],
  correct: 2
}, {
  question: "How many presidents had no party affiliation?",
  choices: ["One", "Two", "Three"],
  correct: 0
}, {
  question: "Who was the only president to serve two non-consecutive terms, making him both the 22nd and 24th president?",
  choices: ["John Quincy Adams", "William Howard Taft", "Grover Cleveland"],
  correct: 2
}];

Answer 1

我发现要做到这一点，我需要将变量放入包含 Handlebars 编译器的函数中，即 var quizNum = num;

HTML:

<script id="radio-template" type="x-handlebars-template">
        {{#each this}}
            <input name={{answerSet}} type='radio' value={{@index}} >{{this}}<br>
        {{/each}}
</script>

JS:

function createRadios() {
        var quizNum = num;
        var radioScript = $("#radio-template").html();
        var template = Handlebars.compile(radioScript);
        Handlebars.registerHelper('answerSet', function () {
            return "quiz" + quizNum;
        });

        question.append(template(allQuestions[counter].choices));
    };

如何使用 Handlebars 将输入名称属性设置为等于变量？

How to set input name attribute equal to a variable using Handlebars?

javascript

jquery

handlebars.js