javascript - Handlebars.js - 如何在模板中使用 JS 中的变量？

Question

我对 Handlebars 和模板总体来说还是新手，我正在尝试根据 JS 中的变量分配输入名称。例如:

HTML:

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

JS:

quiz(number) {
    var quizName = "quiz" + number;
    function createRadios() {
        var radioScript = $("#radio-template").html();
        var template = Handlebars.compile(radioScript);
        Handlebars.registerHelper('answerSet', function() {
            return quizName;
        });  
        $("#question").append(template(allQuestions[counter].choices));
    };
};

结果有效，但单选按钮名称未定义。谁能告诉我如何使 radio 名称等于 quizName 变量？有关更多详细信息，请参阅代码笔:http://codepen.io/Jake_Ratliff/pen/wKoKJX?editors=101

Answer 1

由于您已创建 answerSet 作为助手，因此您需要在模板中将其作为一个调用:

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

请注意上面的 # 并关闭 answerSet。

否则，Handlebars 会假设您正在当前 this 上下文中查找名为 answerSet 的属性；由于不存在，因此返回 undefined。

为了让事情变得更简单，我可能会让您的 answerSet 帮助程序生成整个输入，并将 index 和 this 作为参数。这样，您就不会在元素中间调用助手(具有巨大的助手语法)。