2012-03-04 9 views
7

Sto provando a utilizzare i modelli di baffi per rendere forme molto semplici, tuttavia, uno dei moduli ha una collezione di pulsanti di opzione. Non riesco a capire come avere il pulsante di opzione giusto selezionato quando il modulo è visualizzato.Ingressi radio con modelli Moustache

È qualcosa che è semplice e mi manca qualcosa, o l'aspetto "logico" dei baffi mi impedisce davvero di intendere qualcosa di fondamentale come un pulsante radio?

miei dati simile a questa:

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> 

risposta

4

È possibile farlo utilizzando un 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> 

Date un'occhiata al full example ho utilizzato se avete problemi.

Aggiornamento:

Justin Hileman mi ha mostrato un altro modo di fare questo:

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

completa esempio here.

1

Un'altra opzione, con CoffeeScript (non testato) ...

// 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 

Poi, nel baffi, generare dinamicamente i pulsanti basati sulla matrice generi:

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