Backbone.js Können wir nicht alle tagName?

Ich habe gerade angefangen mit backbone.js und eine Sache, die mir aufgefallen ist, dass ich manchmal nicht wollen, dass jeder tagName enthalten/Kapseln meiner Ansicht template-code. Wenn ich belasse es '' oder 'span' bekomme ich unnötige div und span in meinem code.

Die alternative, die ich fand, ist zu entfernen, die mit Tags aus meiner Vorlage (<div class="photo_box"> in meinem Beispiel wie unten gezeigt) und verwenden Sie diese als tagName aus meiner Sicht. Die meisten der Zeit, dieses tag enthält eine Klasse (.photo_box), und ich habe immer noch zum durchführen einer addClass (dies.el). Ich weiss nicht wirklich wie Streuung bis mein template-code.

Gibt es einen anderen Weg?

JS

//Views
PhotoListView = Backbone.View.extend({
    tagName: 'span',

    render: function() {
        _.each(this.model.models, function(photo) {
            $(this.el).append(new PhotoListItemView({ model: photo }).render().el);
        }, this);
        return this;
    }
});

PhotoListItemView = Backbone.View.extend({
    tagName: 'span',

    template: _.template($('#tpl-PhotoListItemView').html()),

    render: function() {
        $(this.el).html(this.template( this.model.toJSON() ));
        return this;
    }


});

HTML

<!-- Templates -->
<script type="text/template" id="tpl-PhotoListItemView">
                <div class="photo_box">
                    <div class="photo_container">
                        <img src="img/profiling/<%= photo_id %>.jpg" class='photo' />
                    </div>
                </div>
</script>

Ergebnis

<div id="photo_list">
    <span>
        <span>
                    <div class="photo_box">
                        <div class="photo_container">
                            <img src="img/profiling/f_001.jpg" class="photo">
                        </div>
                    </div>
        </span>
        <span>
                    <div class="photo_box">
                        <div class="photo_container">
                            <img src="img/profiling/f_002.jpg" class="photo">
                        </div>
                    </div>
        </span>
    </span>
</div>
  • In diesem Fall, dass Sie wollen einfach tagName eine "div" mit den Namen der Klasse "photo_box". Also Mach das, und entfernen Sie das div aus dem template.
  • DIV in SPAN? Was machst du? Wenn es eine Liste mit UL/LI.
  • Ich Stimme mit den Kommentaren oben. Rückgrat will natürlich die Arbeit mit den "Brocken" von html. Der einzige Weg, um auszudrücken, jene "Brocken" ist mit tags. Ihre Probleme sind nicht verursacht durch eine Einschränkung im Rückgrat, sondern vielmehr, dass Sie html schreiben, das ist nicht idiomatisch. Ich würde einen zweiten Blick auf, wie Sie Ihr markup ist gebildet und versuchen zu machen, dass die Arbeit mit Rückgrat, nicht die andere Weise herum.
InformationsquelleAutor Nyxynyx | 2012-06-24
  1. 7

    Müssen Sie nicht manuell hinzufügen der class-name. Sie können die className Eigenschaft:

    PhotoListItemView = Backbone.View.extend({
    tagName: 'span',
    className: 'photo_box',

    Btw, ich empfehlen, diese HTML-Struktur:

    <ul id="photo_list">
    <li>
        <img src="img/profiling/f_001.jpg" class="photo">
    </li>
    <li>
        <img src="img/profiling/f_003.jpg" class="photo">
    </li>
</ul>
    InformationsquelleAutor Šime Vidas
  2. 22

    Konnte man immer verwenden setElement:

    setElement view.setElement(element)

    Wenn Sie möchten, beantragen ein Backbone-Ansicht in ein anderes DOM-element, verwenden Sie setElement, die auch der zwischengespeicherte $el Referenz und verschieben der Ansicht Delegierten Ereignisse aus dem alten element, um die neue.

    und vergessen tagName komplett:

    PhotoListItemView = Backbone.View.extend({
    template: _.template($('#tpl-PhotoListItemView').html()),
    render: function() {
        this.setElement(this.template(this.model.toJSON()));
        return this;
    }
});

    Demo: http://jsfiddle.net/ambiguous/XWEMg/

    Nebenbei, <span> ist eine schlechte Wahl für einen container (auch vorübergehende) aufgrund seiner begrenzten zulässige Inhalte; riskieren Sie den browser neu anordnen Ihre HTML um etwas zu Holen gilt, wenn Sie beginnen, werfen von beliebigen HTML-Code in ein <span>. Ein <div> ist eine viel sicherere Wahl als es halten kann so ziemlich alles.

    InformationsquelleAutor mu is too short
Schreibe einen Kommentar