Özet: Model verileriyle dinamik olarak görünüm niteliklerini ayarlama
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"
} )
} );
Bu örnek, Backbone'un sizin için bir DOM öğesi oluşturmasına izin verdiğinizi varsayar.
attributesGörünüm yapıcı geçirilen özellikler ayarlandıktan sonra yöntemi denir (bu durumda, modelBackbone oluşturmadan önce), dinamik modeli verilerle özelliklerini ayarlamak için izin gününde el.
Diğer yanıtlardan bazılarının aksine: görünüm sınıfındaki öznitelik değerlerini sabit kodlamaz, bunları model verilerinden dinamik olarak ayarlar; render()attr değerlerinin ayarlanmasını beklemez defalarca her çağrıda vals attr belirlemez render(); DOM öğesinde gereksiz yere öznitelikleri manuel olarak ayarlamaz.
Sınıfı çağırırken Backbone.View.extendveya bir görünüm oluşturucu (örn. new Backbone.View) Ayarlıyorsanız, DOM özellik adını kullanmanız gerektiğini className, ancak bunu attributeskarma / yöntemle ayarlıyorsanız (bu örnekte olduğu gibi) özellik adını kullanmanız gerektiğini unutmayın class.
Backbone 0.9.9'dan itibaren:
Görünüm ilan zaman ... el, tagName, idve classNameonların değerleri zamanında belirlenecek istiyorsanız şimdi, fonksiyonlar olarak tanımlanabilir.
attributesResimde gösterildiği gibi bir yöntemi kullanmaya alternatif olarak yararlı olacağı bir durum olması durumunda bundan bahsediyorum .
Mevcut bir öğeyi kullanma
Mevcut bir öğe kullanıyorsanız (örneğin el, görünüm oluşturucusuna geçiş) ...
var item = new View( { el : some_el } );
... daha sonra attributesöğeye uygulanmaz. İstenen öznitelikler öğe üzerinde önceden ayarlanmamışsa veya bu verileri görünüm sınıfınızda ve başka bir konumda çoğaltmak istemiyorsanız initialize, görünüm oluşturucunuza geçerli attributesolan bir yöntem eklemek isteyebilirsiniz el. Bunun gibi bir şey (kullanarak jQuery.attr):
View.prototype.initialize = function ( options ) {
this.$el.attr( _.result( this, 'attributes' ) );
};
Kullanım eloluşturma, sarıcı kaçınarak
Gördüğüm çoğu örnekte, görünümün "anlamı" kodun elle yazılması gereken anlamsız bir sarmalayıcı öğe olarak hizmet ediyor.
view.el"Anlamsız bir sarmalayıcı öğesi" olmaya gerek yok . Aslında, bu genellikle DOM yapısını bozar. Örneğin bir görünüm sınıfı bir <li>öğeyi temsil ediyorsa , bir <li>- olarak oluşturulması gerekir <div>veya başka bir öğe olarak oluşturulması içerik modelini bozabilir. Büyük olasılıkla doğru görünümün eleman kurma (gibi özelliklerini kullanarak odaklanmak isteyeceksiniz tagName, classNameve id) ve daha sonra onun render içeriği bundan sonra.
Omurga görünümü nesnelerinizin DOM ile nasıl etkileşime gireceğine ilişkin seçenekler tamamen açıktır. 2 temel ilk senaryo vardır:
Mevcut bir DOM öğesini Backbone görünümüne ekleyebilirsiniz.
Backbone'un belgeden bağlantısı kesilen yeni bir öğe oluşturmasına izin verebilir, ardından bunu bir şekilde belgeye ekleyebilirsiniz.
Öğe için içerik oluşturmanın çeşitli yolları vardır (örneğinizde olduğu gibi bir değişmez dize ayarlayın; Bıyık, Gidon vb. Gibi bir şablon oluşturma kitaplığı kullanın). elGörünümün özelliğini nasıl kullanmanız gerektiği, ne yaptığınıza bağlıdır.
Mevcut öğe
İşleme örneğiniz, görünümlerin somut örneğini göstermeseniz de, görünüme atadığınız mevcut bir öğeye sahip olduğunuzu gösteriyor. Durum buysa ve öğe zaten belgenin içindeyse, bunun gibi bir şey yapmak isteyebilirsiniz (içeriğini güncelleyin el, ancak elkendisini değiştirmeyin ):
render : function () {
this.$el.html( "Some stuff" );
}
http://jsfiddle.net/vQMa2/1/
Oluşturulan öğe
Diyelim ki mevcut bir elementiniz yok ve Backbone'un sizin için bir tane oluşturmasına izin veriyorsunuz. Sen olabilir böyle bir şey yapmak istiyorum (ama senin bakış şey dışarıdan kendisi hakkında bilerek sorumlu tutulamaz böylece mimar şeyler muhtemelen iyidir):
render : function () {
this.$el.html( "Some stuff" );
$( "#some-container" ).append( this.el );
}
http://jsfiddle.net/vQMa2/
Şablonlar
Benim durumumda, şablon kullanıyorum, örneğin:
<div class="player" id="{{id}}">
<input name="name" value="{{name}}" />
<input name="score" value="{{score}}" />
</div>
<!-- .player -->
Şablon tam görünümü temsil eder. Diğer bir deyişle, şablonun etrafında bir sarmalayıcı div.playerolmayacak - benim görüşümün kökü veya en dıştaki öğesi olacak.
Oyuncu sınıfım şöyle görünecek (çok basitleştirilmiş bir örnekle 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() );
}
} );