带胡须模板的无线电输入

我正在尝试使用小胡子模板呈现非常简单的窗体，但是，其中一种窗体具有单选按钮的集合。我无法弄清楚如何在表单呈现时选择正确的单选按钮。带胡须模板的无线电输入

这是简单的东西，我只是想念一些东西，或胡须的“无逻辑”方面真的阻止我像单选按钮一样基础的东西？

我的数据看起来是这样的：

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>

来源

2012-03-04 Jeremy Baker

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

更新：

贾斯汀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。

来源

2012-03-04 19:11:10 ebaxt

另一种选择，用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}}

来源

2012-06-13 20:21:37

带胡须模板的无线电输入

回答

相关问题