Backbone.js - Wie überprüfe ich am besten eine Checkbox?

Question

Mein Backbone-Modell hat einen booleschen Wert (isRegistered). Wenn ich die Ansicht rendere, möchte ich ein Kontrollkästchen aktivieren oder deaktivieren, abhängig vom wahren/falschen Wert des booleschen Wertes.

Mein aktueller Aufwand sieht wie folgt aus:

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

dies, weil nicht funktioniert nach dem W3C-Spezifikation das Attribut checked vollständig ein Kontrollkästchen deaktivieren entfernt werden muss.

Wie mache ich es mit Backbone-Vorlage?

Answer 1

Sie brauchen nicht den checked= Teil. Drucken Sie das Kontrollkästchen nur aus, wenn es überprüft werden muss.

---

EDIT

Jetzt, wo wir gerade festgestellt haben, dass den Ausdruck "geprüft" gültig html ist, könnte man der Einfachheit halber versuchen:

machen:

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

Vorlage :

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

Keine Notwendigkeit für chaotische Bedingungen in Ihrer Vorlage mit dieser Methode.

Answer 2

Sie könnten einen Test verwenden checked='checked'

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

Answer 3

ich Decorator in diesen Fällen zu verwenden, verwendet zu umschließen. Ich aussetzen hier ein Beispiel dafür, wie es aussieht:

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

ich ein zusätzliches css_classesDekorateur Attribut hinzugefügt haben so können Sie diesen Ansatz sehen kann eine gemeinsame Lösung für mehrere Situationen.

Ihre View.render kann wie folgt aussehen:

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

Ich hatte ein ähnliches Problem, bei dem ich jemandem geerbt Django + hamlpy (HAML) + Backbone.js + Undescore.js mit Schnurrbart-Vorlagen (was für ein Durcheinander!)

Haml Verarbeitung in hamlpy nicht gerade mag:

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

oder ähnliche Sache. Ich habe einen Django-Hamply-Stacktrace.

ich es geschafft, es zu hacken von Moustache Umstülpungen (siehe: http://mustache.github.com/mustache.5.html)

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

Wie auch immer die Hoffnung, dass verschwenden Stunden ihrer Lebenskraft einen armen Googler hilft!

Answer 5

Hier ist eine sehr einfache Art und Weise, es zu tun.

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

Beachten Sie, dass ich <% verwenden und nicht <% = für die Bedingung.

Sie könnten den Wert von isRegistered zu "checked" oder "" in Ihrem Modell und

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

mit so etwas wie

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