Question

I’m trying to use mustache templates to render very simple forms, however, one of the forms has a collection of radio buttons. I can’t figure out how to have the right radio button selected when the form is rendered.

Is this something that is simple and I’m just missing something, or does the “logic-less” aspect of mustache really prevent me rending something as basic as a radio button?

My data looks something like this:

data = { gender: 'female' }

<form>
  <label><input type="radio" name="gender" value="male"> Male</label>
  <label><input type="radio" name="gender" value="female"> Female</label>
</form>

Answer 1

You can do this using a lambda:

var data = {
    gender: 'female',
    wrapped: function () {
        return function (text) {
            return text.replace('value="' + this.gender+'"', 'value="' + this.gender+'" checked');
        }
    }
};

<form>
    {{#wrapped}}
    <label><input type="radio" name="gender" value="male"> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
    {{/wrapped}}
</form>

Have a look at the full example I used if you have any trouble.

Update:

Justin Hileman showed me another way of doing this:

<form>
<label><input type="radio" name="gender" value="male"{{#maleIsDefault}} checked{{/maleIsDefault}}>
Male</label>
<label><input type="radio" name="gender" value="female"{{#femaleIsDefault}} checked{{/femaleIsDefault}}> Female</label>
</form>

var data = {
        gender: 'female',
        maleIsDefault: function() {
            return this.gender == 'male';
        },
        femaleIsDefault: function() {
            return this.gender == 'female';
        }
};

Full example here.