2012-03-04 25 views
7

非常に単純なフォームをレンダリングするためにひげ飾りテンプレートを使用しようとしていますが、フォームの1つにラジオボタンのコレクションがあります。私はフォームがレンダリングされるときに適切なラジオボタンを選択する方法を理解できません。Mustacheテンプレートを使用したラジオ入力

シンプルで何かが欠落しているか、または口髭の「論理的でない」側面がラジオボタンのような基本的なものに変わってしまうのを防ぐのですか?あなたは、ラムダを使用してこれを行うことができます

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> 

答えて

4

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を見てください

私のデータは次のようになります。

更新:

<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

ジャスティンHileman私にこれを行うための別の方法を示しました。口ひげで次に

(未テスト)のCoffeeScriptと
1

別のオプション、...

// 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}} 
関連する問題