Zusammenfassung: Ansichtsattribute dynamisch mit Modelldaten festlegen
http://jsfiddle.net/5wd0ma8b/
// View class with `attributes` method
var View = Backbone.View.extend( {
attributes : function () {
// Return model data
return {
class : this.model.get( 'item_class' ),
id : this.model.get( 'item_id' )
};
}
// attributes
} );
// Pass model to view constructor
var item = new View( {
model : new Backbone.Model( {
item_class : "nice",
item_id : "id1"
} )
} );
In diesem Beispiel wird davon ausgegangen, dass Sie Backbone erlauben, ein DOM-Element für Sie zu generieren.
Die attributesMethode wird aufgerufen, nachdem die an den Ansichtskonstruktor übergebenen Eigenschaften festgelegt wurden (in diesem Fall model). Auf diese Weise können Sie die Attribute mit den Modelldaten dynamisch festlegen, bevor Backbone erstellt wird el.
Im Gegensatz zu einigen anderen Antworten: Codieren Sie Attributwerte in der Ansichtsklasse nicht fest, sondern setzen Sie sie dynamisch aus Modelldaten. wartet nicht bis render()zum Einstellen der Werte; setzt nicht wiederholt attr vals bei jedem Aufruf von render(); setzt attr vals für das DOM-Element nicht unnötig manuell.
Beachten Sie, dass Sie beim Festlegen der Klasse beim Aufrufen Backbone.View.extendoder eines Ansichtskonstruktors (z. B. new Backbone.View) den Namen der DOM-Eigenschaft verwenden müssen.className . Wenn Sie ihn jedoch über den attributesHash / die Methode festlegen (wie in diesem Beispiel), müssen Sie den Attributnamen verwenden class.
Ab Backbone 0.9.9:
Wenn Sie eine Ansicht zu erklären ... el, tagName,id und classNamejetzt können als Funktionen definiert werden, wenn Sie ihre Werte wollen zur Laufzeit bestimmt werden.
Ich erwähne dies für den Fall, dass es eine Situation gibt, in der dies als Alternative zur Verwendung von nützlich wäre attributes Methode wie abgebildet .
Verwenden eines vorhandenen Elements
Wenn Sie ein vorhandenes Element verwenden (z. B. elan den Ansichtskonstruktor übergeben) ...
var item = new View( { el : some_el } );
... wird dann attributesnicht auf das Element angewendet. Wenn die gewünschten Attribute nicht bereits auf dem Element festlegen, oder Sie wollen nicht , dass die Daten in der Ansichtsklasse und einen anderen Ort zu kopieren, dann können Sie eine hinzufügen initializeMethode zu Ihrer Ansicht Konstruktor, gilt attributesauf el. So etwas (mit jQuery.attr):
View.prototype.initialize = function ( options ) {
this.$el.attr( _.result( this, 'attributes' ) );
};
Verwendung el, Rendern, Vermeiden des Wrappers
In den meisten Beispielen, die ich gesehen habe, dient das el der Ansicht als bedeutungsloses Wrapper-Element, in das man den 'semantischen' Code manuell schreiben muss.
Es gibt keinen Grund view.el, "ein bedeutungsloses Wrapper-Element" zu sein. Tatsächlich würde dies oft die DOM-Struktur brechen. Wenn eine Ansichtsklasse <li>beispielsweise ein Element darstellt, muss sie als - gerendert werden, da das <li>Rendern als <div>oder ein anderes Element das Inhaltsmodell beschädigen würde. Sie werden wahrscheinlich Ihre Ansicht des Elements wollen richtig konzentrieren sich auf die Einrichtung (mit Eigenschaften wie tagName, classNameund id) und dann machen seine Inhalte danach.
Die Optionen für die Interaktion Ihrer Backbone-Ansichtsobjekte mit dem DOM sind weit offen. Es gibt zwei grundlegende Ausgangsszenarien:
Sie können ein vorhandenes DOM-Element an eine Backbone-Ansicht anhängen.
Sie können Backbone erlauben, ein neues Element zu erstellen, das vom Dokument getrennt ist, und es dann irgendwie in das Dokument einfügen.
Es gibt verschiedene Möglichkeiten, wie Sie den Inhalt für das Element generieren können (legen Sie wie in Ihrem Beispiel eine Literalzeichenfolge fest; verwenden Sie eine Vorlagenbibliothek wie Moustache, Lenker usw.). Wie sollten Sie die verwendenel Eigenschaft der Ansicht verwenden sollten, hängt davon ab, was Sie tun.
Vorhandenes Element
In Ihrem Rendering-Beispiel wird vorgeschlagen, dass Sie ein vorhandenes Element haben, das Sie der Ansicht zuweisen, obwohl Sie keine Instanziierung der Ansichten anzeigen. Wenn dies der Fall ist und sich das Element bereits im Dokument befindet, möchten Sie möglicherweise Folgendes tun (aktualisieren Sie den Inhalt von el, ändern Sie elsich jedoch nicht selbst):
render : function () {
this.$el.html( "Some stuff" );
}
http://jsfiddle.net/vQMa2/1/
Generiertes Element
Angenommen, Sie haben kein vorhandenes Element und lassen Backbone eines für Sie generieren. Sie können so etwas wie dies tun wollen (aber es ist wahrscheinlich besser Architekt Dinge , so dass Ihre Ansicht zu wissen , über alles , was außen nicht verantwortlich ist selbst):
render : function () {
this.$el.html( "Some stuff" );
$( "#some-container" ).append( this.el );
}
http://jsfiddle.net/vQMa2/
Vorlagen
In meinem Fall verwende ich Vorlagen, z.
<div class="player" id="{{id}}">
<input name="name" value="{{name}}" />
<input name="score" value="{{score}}" />
</div>
<!-- .player -->
Die Vorlage repräsentiert die vollständige Ansicht. Mit anderen Worten, es wird keinen Wrapper um die Vorlage geben - es div.playerwird das Stamm- oder äußerste Element meiner Ansicht sein.
Meine Spielerklasse sieht ungefähr so aus (mit einem sehr vereinfachten Beispiel render()):
Backbone.View.extend( {
tagName : 'div',
className : 'player',
attributes : function () {
return {
id : "player-" + this.model.cid
};
},
// attributes
render : function {
var rendered_template = $( ... );
// Note that since the top level element in my template (and therefore
// in `rendered_template`) represents the same element as `this.el`, I'm
// extracting the content of `rendered_template`'s top level element and
// replacing the content of `this.el` with that.
this.$el.empty().append( rendered_template.children() );
}
} );