Backbone.js - Qual è il modo migliore per selezionare una casella di controllo

Question

Il mio modello di backbone ha un valore booleano (isRegistered). Quando visualizzo la vista, voglio che la casella sia spuntata o deselezionata a seconda del valore vero/falso del booleano.

Il mio sforzo attuale si presenta così:

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

questo non funziona perché secondo il W3C specifica l'attributo controllato deve essere completamente rimosso per deselezionare la casella di controllo.

Come si utilizza il modello di dorsale?

Answer 1

Non è necessaria la parte checked=. basta stampare check-in il tag se ha bisogno di essere controllato.

---

EDIT

Ora che abbiamo stabilito che solo la stampa "controllato" fuori è valido html, si potrebbe provare per semplicità:

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)); 

modello :

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

Non è necessario disporre di condizionali disordinati nel modello utilizzando questo metodo.

Answer 2

si potrebbe usare un test per racchiudere checked='checked'

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

Answer 3

Ho usato per usare un Decorator per questi casi. Espongo qui un esempio di come si può assomiglia:

// 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; 
    } 
}); 

Ho aggiunto un extra css_classesattributo decoratore modo da poter vedere questo approccio può essere una soluzione comune per diverse situazioni.

tuo View.render può assomigliare a questo:

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

Ho avuto un problema simile in cui ho ereditato di qualcuno Django + hamlpy (HAML) + Backbone.js + Undescore.js con i modelli Moustache (che casino!)

elaborazione Haml in hamlpy non piaceva esattamente:

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

O qualsiasi cosa simile. Ho ottenuto uno stacktrace Django hamlpy.

sono riuscito a incidere utilizzando sezioni invertite di Moustache (vedi: http://mustache.github.com/mustache.5.html)

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

In ogni caso, la speranza che aiuta a qualche povero Googler di sprecare ore della loro forza vitale!

Answer 5

Ecco un modo molto semplice per farlo.

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

Si noti che io uso <% e non <% = per la condizione.

Si può solo impostare il valore di isRegistered a "selezionata" o "" nel modello e chiamare

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

con qualcosa di simile

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