Question

我正在尝试使用小胡子模板来呈现非常简单的表单，但是，其中一个表单有一组单选按钮。我无法弄清楚如何在渲染表单时选择正确的单选按钮。

这是一件很简单的事情吗？我只是遗漏了一些东西，或者胡子的“无逻辑”方面是否真的阻止我像单选按钮一样基本的东西？

我的数据看起来像这样：

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

您可以使用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>

如果您遇到任何问题，请查看我使用的full example。

<强>更新

Justin Hileman告诉我另一种方法：

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

完整示例here。

Answer 2

另一种选择，使用coffeescript（未经测试）......

// define radio button options in an array
genders = [
  { code: 'M', name: 'Male' }
  { code: "F", name: "Female" }
]

// flag the current object as "selected"
for g in genders
  if g.code == existingGenderValue
    g.selected = true

然后在小胡子中，根据性别数组动态生成按钮：

{{#genders}}
  <label class="radio">
    <input type="radio" name="gender" value="{{code}}" {{#selected}} checked="checked" {{/selected}}>
    {{name}}
  </label>
{{/genders}}

带有Mustache模板的无线电输入

2 个答案: