2012-01-30 25 views
10

Estoy utilizando manubrios en una aplicación de rieles backbone.js, y tengo un campo booleano que estoy rellenando con una casilla de verificación.usando el manillar bindAttr para la casilla de verificación

Cuando me carga la página de edición, el formulario se rellena con el contenido desde el servidor JSON algo así como

 
{id:3,user:'test',checkbox:1} 

ahora en mi forma de manillar, quiero mostrar que la casilla de verificación es 1.

 
< input type="checkbox" name="checkbox" value="1" {{#if checkbox}} {{bindAttr checkbox checked="isSelected"}}{{/if}} > 

pero esto no devuelve la casilla marcada. Realmente me gustaría poder decir if checkbox==1, pero no veo cómo puedo hacerlo con manubrios.

Anysuggestions ??

Respuesta

-6

Terminé usando un asistente de manillar para esto.

+18

¿Puede darnos un ejemplo para que otros puedan aprender? –

9

Lo que normalmente haría, es usar un booleano en el 'modelo'.

{ 
    isChecked: true 
} 

y luego

<input type="checkbox" {{bindAttr checked="isChecked"}}> 

Si el booleana es verdadera, va a proporcionar la propiedad checked, y si el booleano es falso, se omitiría la propiedad. Así que si isChecked es cierto, entonces Manillar emitiría

<input type="checkbox" checked> 

y si isChecked eran falsas, nos darían

<input type="checkbox"> 

que es lo que queremos!

+0

para un enlace bidireccional de la propiedad "checked" del elemento al controlador/contexto (para que el controlador/contexto se actualice cuando se marca la casilla de verificación) puede usar un helper de entrada: '{{input type =" checkbox " checked = isChecked value = "1" data-unchecked-value = "0"}} ' (pero dado que 'data-unchecked-value' no es compatible con los asistentes de entrada de ember, consulte esto: http://stackoverflow.com/questions/9894335) –

7

También escribí un ayudante para hacer esto. No utiliza Backbone.js, por lo que puede ser una alternativa para algunos:

Handlebars.registerHelper('checked', function(currentValue) { 
    return currentValue == '1' ? ' checked="checked"' : ''; 
}); 

Ejemplo de uso:

<input type="checkbox" name="cbxExample" id="cbxExample" {{checked cbxExample}}/> 

correría una casilla de verificación si el suministrado JSON fue:

{"cbxExample" : "1"} 

Como resultado:

<input type="checkbox" name="cbxExample" id="cbxExample" checked="checked" /> 

[mi primera publicación - ¡espero que sea útil!]

+3

Probablemente quiera usar un '' 'triple para que el' "' no se escape. con '{{checked cbxExample}}' la salida será 'checked = " marcada "' en su código. Con '{{{comprobado cbxExample}}}', obtenemos la salida correcta ('checked =" checked "'). –

+0

Esto me ayudó a lidiar con JSON teniendo ... marcado: "verdadero" o "falso" - como cadenas 'return currentValue == 'true'? 'verificado': ''; ' – eon

Cuestiones relacionadas