帶鬍鬚模板的無線電輸入

我正在嘗試使用小鬍子模板呈現非常簡單的窗體，但是，其中一種窗體具有單選按鈕的集合。我無法弄清楚如何在表單呈現時選擇正確的單選按鈕。帶鬍鬚模板的無線電輸入

這是簡單的東西，我只是想念一些東西，或鬍鬚的「無邏輯」方面真的阻止我像單選按鈕一樣基礎的東西？

我的數據看起來是這樣的：

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

帶鬍鬚模板的無線電輸入

回答

相關問題