Backbone.js - Cuál es la mejor manera de marcar una casilla de verificación

Question

Mi modelo de red troncal tiene un valor booleano (isRegistered). Cuando visualizo la vista, quiero marcar o desmarcar una casilla de verificación dependiendo del valor verdadero/falso del booleano.

Mi esfuerzo actual es el siguiente:

<input id="isRegisteredCheckbox" checked="<%= isRegistered ? 'checked': ''"/> 

esto no funciona porque de acuerdo a la especificación del W3C tiene que ser eliminado por completo para desactivar una casilla de verificación del atributo comprobado.

¿Cómo lo hago utilizando una plantilla de red troncal?

Answer 1

No necesita la pieza checked=. simplemente imprima la etiqueta marcada si es necesario verificarla.

---

EDITAR

Ahora que hemos determinado que acaba de imprimir "marcado" salida es HTML válido, puede intentar por simplicidad:

render:

var registered; 
var tmpl = _.template(your template); 
isRegistered ? registered = 'checked' : registered = ''; 
var tmpl_data = _.extend(this.model.toJSON(), {registered: registered}); // or whatever values you need to add 
$(this.el).html(tmpl(tmpl_data)); 

plantilla :

<input type="checkbox" {{ registered }}> 

No hay necesidad de condiciones desordenadas en su plantilla usando este método.

Answer 2

se puede utilizar una prueba para encerrar checked='checked'

<input id="isRegisteredCheckbox" <% if (isRegistered) { %>checked="checked"<% } %> /> 

Answer 3

Solía ​​usar una Decorator para estos casos. Expongo aquí un ejemplo de cómo se puede parece:

// code simplified and not tested 
var MyModelDecorator = Backbone.Model.extend({ 
    initialize: function(opts){ 
    this.model = opts.model; 
    }, 

    toJSON: function(){ 
    var json = 
     _.extend(
     this.model.toJSON(), 
     { 
      checked: this.checked(), 
      css_classes: this.cssClasses() 
     } 
    ); 

    return json; 
    }, 

    checked: function(){ 
    result = ""; 
    if(this.model.get("checked")) result += "checked=\"true\""; 
    return result; 
    }, 

    cssClasses: function(){ 
    result = ""; 
    if(this.model.get("checked"))   result += " checked"; 
    if(this.model.get("key") == "value") result += " important"; 
    return result; 
    } 
}); 

he añadido un extra css_classesatributo decorador para que pueda ver este enfoque puede ser una solución común para varias situaciones.

Su View.render puede tener este aspecto:

// code simplified and not tested 
var myView = Backbone.View.extend({ 
    template: _.template("<input id=\"isRegisteredCheckbox\" <%= checked %> class=\"<%= css_classes %>\" />"), 

    render: function(){ 
    var decorator = new MyModelDecorator({ model: this.model }); 
    this.$el.html(this.template(decorator.toJSON())); 
    } 
}); 

Answer 4

tuve un problema similar donde he heredado de alguien Django + hamlpy (HAML) + + Backbone.js Undescore.js con las plantillas del bigote (que desastre!)

procesamiento Haml en hamlpy no le gustaba exactamente:

%input{ :checked => {{isChecked}} ? true : None } 

O cualquier cosa similar. Obtuve una stack stack de Django.

que lograron entrar ilegalmente en él mediante el uso de secciones invertidas del bigote (ver: http://mustache.github.com/mustache.5.html)

{#isChecked} 
%input{:checked => 'true' } 
{/isChecked} 
{^isChecked} 
%input{ ... without the checked attribute ... } 
{/isChecked} 

De todos modos, espero que ayude a un pobre empleado de Google de perder horas de su fuerza de vida!

Answer 5

Aquí hay una forma muy simple de hacerlo.

<input <% if(isRegistered) print("CHECKED"); %> type="checkbox" id="isRegisteredCheckbox" /> 

en cuenta que i uso <% y no <% = para la condición.

Se podía establecer el valor de isRegistered como "ingreso" o "" en su modelo y llaman

<input id="isRegisteredCheckbox" <%= registered %> /> 

con algo como

serialize: function() { 
    var isChecked = (isRegistered) ? "CHECKED" : ""; 
    return {registered : ischecked}; 
},