Podsumowanie: dynamiczne ustawianie atrybutów widoku z danymi modelu
http://jsfiddle.net/5wd0ma8b/
var View = Backbone.View.extend( {
attributes : function () {
return {
class : this.model.get( 'item_class' ),
id : this.model.get( 'item_id' )
};
}
} );
var item = new View( {
model : new Backbone.Model( {
item_class : "nice",
item_id : "id1"
} )
} );
Ten przykład zakłada, że pozwalasz Backbone wygenerować dla Ciebie element DOM.
attributesMetoda jest wywoływana po właściwości przekazany do konstruktora widok są ustawione (w tym przypadku model), co pozwala na dynamiczne ustawianie atrybutów z danymi modelu przed tworzy Backbone el.
W przeciwieństwie do niektórych innych odpowiedzi: nie koduje na stałe wartości atrybutów w klasie widoku, ustawia je dynamicznie na podstawie danych modelu; nie czeka aż render()do ustawienia wartości atr; nie ustawia wielokrotnie wartości atr w każdym wywołaniu do render(); nie ustawia niepotrzebnie ręcznie wartości atrybutów w elemencie DOM.
Zauważ, że jeśli ustawienie klasę podczas wywoływania Backbone.View.extendlub konstruktor widok (na przykład new Backbone.View), trzeba użyć nazwy własność dom, classNameale jeśli ustawienie go za pomocą attributesskrótu / metody (jak w tym przykładzie) trzeba użyć nazwy atrybutu class.
Od wersji Backbone 0.9.9:
Podczas deklarowania View ... el, tagName, idi classNamemoże teraz być zdefiniowane jako funkcje, jeśli chcesz ich wartość należy określić w czasie wykonywania.
Wspominam o tym na wypadek sytuacji, w której byłoby to przydatne jako alternatywa dla attributesmetody przedstawionej na ilustracji.
Korzystanie z istniejącego elementu
Jeśli używasz istniejącego elementu (np. Przekazując eldo konstruktora widoku) ...
var item = new View( { el : some_el } );
... wtedy attributesnie zostanie zastosowany do elementu. Jeśli żądane atrybuty nie są jeszcze ustawione w elemencie lub nie chcesz powielać tych danych w klasie widoku i innej lokalizacji, możesz dodać initializemetodę do konstruktora widoku, która ma zastosowanie attributesdo el. Coś takiego (używając jQuery.attr):
View.prototype.initialize = function ( options ) {
this.$el.attr( _.result( this, 'attributes' ) );
};
Użycie el, renderowanie, unikanie opakowania
W większości przykładów, które widziałem, el widoku służy jako bezsensowny element opakowania, w którym trzeba ręcznie wpisać kod „semantyczny”.
Nie ma powodu, view.elaby być „bezsensownym elementem opakowania”. W rzeczywistości często powodowałoby to uszkodzenie struktury DOM. Jeśli <li>na przykład klasa widoku reprezentuje element, musi być renderowana jako <li>- renderowanie jej jako elementu <div>lub dowolnego innego elementu spowodowałoby uszkodzenie modelu zawartości. Będziesz prawdopodobnie chcesz skupić się na prawidłowej konfiguracji elementu widoku danych (za pomocą właściwości jak tagName, classNamei id), a następnie renderowania jej zawartości później.
Opcje dotyczące interakcji obiektów widoku Backbone z DOM są szeroko otwarte. Istnieją 2 podstawowe scenariusze początkowe:
Możesz dołączyć istniejący element DOM do widoku Backbone.
Możesz zezwolić Backbone na utworzenie nowego elementu, który jest odłączony od dokumentu, a następnie w jakiś sposób wstawić go do dokumentu.
Istnieje wiele sposobów generowania zawartości elementu (ustaw ciąg literału, jak w przykładzie; użyj biblioteki szablonów, takiej jak Mustache, Handlebars itp.). Sposób korzystania z elwłaściwości widoku zależy od tego, co robisz.
Istniejący element
Twój przykład renderowania sugeruje, że masz istniejący element, który przypisujesz do widoku, chociaż nie pokazujesz instancji widoków. Jeśli tak jest, a element jest już w dokumencie, możesz chcieć zrobić coś takiego (zaktualizuj zawartość el, ale nie zmieniaj elsamego siebie):
render : function () {
this.$el.html( "Some stuff" );
}
http://jsfiddle.net/vQMa2/1/
Wygenerowany element
Powiedzmy, że nie masz istniejącego elementu i pozwalasz, aby Backbone wygenerował jeden za Ciebie. Ty może chcesz zrobić coś takiego (ale to może lepiej do rzeczy architektonicznych tak, że widok nie jest odpowiedzialna za wiedząc o samej zewnątrz cokolwiek):
render : function () {
this.$el.html( "Some stuff" );
$( "#some-container" ).append( this.el );
}
http://jsfiddle.net/vQMa2/
Szablony
W moim przypadku korzystam z szablonów np:
<div class="player" id="{{id}}">
<input name="name" value="{{name}}" />
<input name="score" value="{{score}}" />
</div>
<!-- .player -->
Szablon przedstawia cały widok. Innymi słowy, szablon nie będzie otaczał - div.playerbędzie to główny lub najbardziej zewnętrzny element mojego widoku.
Moja klasa gracza będzie wyglądać mniej więcej tak (z bardzo uproszczonym przykładem render()):
Backbone.View.extend( {
tagName : 'div',
className : 'player',
attributes : function () {
return {
id : "player-" + this.model.cid
};
},
render : function {
var rendered_template = $( ... );
this.$el.empty().append( rendered_template.children() );
}
} );