Backbone.js - Was ist der beste Weg, um zu überprüfen, eine checkbox

Mein Rückgrat Modell hat einen booleschen Wert (isRegistered). Wenn ich die Wiedergabe der anzeigen, ich will eine checkbox aktiviert oder deaktiviert, je nach true/false-Wert des boolean.

Meine aktuellen Bemühungen sieht wie folgt aus:

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

das funktioniert nicht, denn laut der W3C-Spezifikation, die checked-Attribut muss vollständig entfernt werden, deaktivieren Sie ein Kontrollkästchen.

Wie mache ich es mit backbone-Vorlage?

  • <input type="checkbox" <%= item.sichtbar ist ? "checked" : "" % "> " value="<%= item.id %>"/>
InformationsquelleAutor reach4thelasers | 2012-04-25
  1. 7

    Brauchen Sie nicht die checked= Teil. nur drucken Sie überprüft in den tag, wenn es geprüft werden muss.

    BEARBEITEN

    Nun, da wir festgestellt haben, dass nur drucken "aktiviert" aus ist Gültiger html-Code, können Sie versuchen, der Einfachheit halber:

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

    Vorlage:

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

    Keine Notwendigkeit für chaotisch-Bedingungen in Ihrer Vorlage, die mithilfe dieser Methode.

    • Während Ihr Vorschlag wird das Rendern im Browser, die OP genannten "W3C-specs'. Je nachdem, welche Skillung er bezieht sich auf die checked-Attribut erfordern einen entsprechenden Wert (auch wenn die "").
    • es ist gültig in HTML 4 Strict, HTML 4 Transitional und HTML5. Ich meine, ich denke, es ist möglich, es ist nicht gültig in HTML4, aber, Mann, wenn HTML4 strict & transitional UND html 5 sind nicht "W3C-specs", ich bin nicht sicher, was bedeuten würde W3C-Spezifikationen.
    • er, stellen, die "nicht gültig in html 3"... oder, Schluck, xhtml...
    • Dies funktioniert in allen Browsern wir sind inmplementing für im Grunde >IE6 definitiv die einfachste und sauberste Antwort zu
    • Ich dachte, xhtml ..es war der Renner als ich ein Kind war:-) ich schaute in den html 4/5 specs wieder, und hatte nicht realisiert, dass es erlaubt, sowohl die verdichteten und lange Versionen von booleschen Attributen.
    • das ist, weil es gültiges markup selbst zurück zu HTML 3.2 wurde veröffentlicht im Jahr 1997. Nur XHTML rendert dieses markup ungültig, und Sie sollten nicht immer XHTML verwenden für Tausende von Gründen 😉

    InformationsquelleAutor tkone
  2. 8

    Könnten Sie ein test, um zu schließen checked='checked'

    <input id="isRegisteredCheckbox" <% if (isRegistered) { %>checked="checked"<% } %> />
    InformationsquelleAutor nikoshr
  3. 1

    Ich war früher ein Decorator für diese Fälle. Ich setze hier ein Beispiel 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;
  }
});

    Habe ich eine zusätzliche css_classes decorator-Attribut so können Sie sehen, dieser Ansatz kann sein, 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() ) );
  }
});
    InformationsquelleAutor fguillen
  4. 1

    Hier ist eine sehr einfache Möglichkeit, es zu tun.

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

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

    Könnte man nur den Wert festlegen, der isRegistered zu "CHECKED" oder "" im Modell und nennen

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

    etwas wie 

    serialize: function() {
  var isChecked = (isRegistered) ? "CHECKED" : "";
  return {registered : ischecked};
},
    InformationsquelleAutor J D
  5. 0

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

    Haml Verarbeitung in hamlpy wusste nicht genau wie:

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

    Oder einer ähnlichen Sache. Ich habe eine Django-hamlpy stacktrace.

    Habe ich es geschafft, es zu hacken, indem Schnurrbart ist invertierten Abschnitten (siehe: http://mustache.github.com/mustache.5.html)

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

    Anyway, ich hoffe, dass hilft einigen Armen Googler von verschwenden Stunden Ihres Lebens Kraft!

    InformationsquelleAutor raf
Schreibe einen Kommentar