2012-03-04 31 views
7

Estoy tratando de usar plantillas de bigote para representar formularios muy simples; sin embargo, una de las formas tiene una colección de botones de opción. No puedo entender cómo seleccionar el botón de opción derecho cuando se procesa el formulario.Entradas de radio con plantillas de bigote

¿Esto es algo simple y me falta algo, o el aspecto "sin lógica" del bigote realmente me impide rasgar algo tan básico como un botón de opción?

Mis datos se ve algo como esto:

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> 

Respuesta

4

Usted puede hacer esto utilizando una 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> 

Tenga una mirada en la que se utiliza full example si tiene algún problema.

Actualización:

Justin Hileman me mostró otra forma de hacer esto:

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

Ejemplo completo here.

1

Otra opción, con CoffeeScript (no probado) ...

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

Luego, en el bigote, generar dinámicamente los botones basados ​​en la gama géneros:

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