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

Question

I am still new to Handlebars and templating in general and I am trying to assign input names based on a variable in my JS. For example:

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));
    };
};

The result works, except radio button names are undefined. Can anyone tell me how to make the radio names equal to the quizName variable? For more detail, here is the codepen: http://codepen.io/Jake_Ratliff/pen/wKoKJX?editors=101

Answer 1

Since you've created answerSet as a helper, you'll need to call it as one in your template:

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

Note the # and closing answerSet above.

Otherwise, Handlebars assumes you're looking for a property called answerSet in the current this context; since none exists, it returns undefined .

To make things a little easier, I might have your answerSet helper generate the entire input and take index and this as params. That way, you're not calling a helper (with giant helper syntax) in the middle of an element.