Bu harika bir soru. Omurga yaptığı varsayımların olmaması nedeniyle harikadır, ancak bu, bunun gibi şeyleri kendiniz nasıl uygulayacağınıza (nasıl karar vereceğiniz) anlamına gelir. Kendi eşyalarımı inceledikten sonra, senaryo 1 ve senaryo 2'nin bir karışımını kullandığımı görüyorum. 4. büyülü bir senaryo olduğunu düşünmüyorum çünkü senaryo 1 ve 2'de yaptığınız her şey yapılır.
Bir örnekle nasıl başa çıkmayı sevdiğimi açıklamanın en kolay olacağını düşünüyorum. Diyelim ki bu basit sayfa belirtilen görünümlere ayrılmış:
HTML'nin işlendikten sonra şöyle bir şey olduğunu varsayalım:
<div id="parent">
<div id="name">Person: Kevin Peel</div>
<div id="info">
First name: <span class="first_name">Kevin</span><br />
Last name: <span class="last_name">Peel</span><br />
</div>
<div>Phone Numbers:</div>
<div id="phone_numbers">
<div>#1: 123-456-7890</div>
<div>#2: 456-789-0123</div>
</div>
</div>
Umarım HTML'nin diyagramla nasıl eşleştiği oldukça açıktır.
ParentView2 çocuk manzaraları, tutar InfoViewve PhoneListView, bunlardan biri de birkaç ekstra div'leri, #namebir noktada ayarlanması gerekir. PhoneListViewkendi alt görünümlerini, bir dizi PhoneViewgirdiyi tutar.
Yani asıl sorunuza. Başlatma ve oluşturma işlemlerini görünüm türüne göre farklı şekilde ele alıyorum. Görüşlerimi iki türe ayırıyorum, Parentgörünümler ve Childgörünümler.
Aralarındaki fark basittir, Parentgörünümler alt görünümleri tutarken Childgörünümler tutmaz . Yani benim örnekte, ParentViewve PhoneListViewvardır Parentederken, görünümler InfoViewve PhoneViewgirişleri vardır Childgörünümleri.
Daha önce de belirttiğim gibi, bu iki kategori arasındaki en büyük fark, oluşturulmalarına izin verildiğidir. Mükemmel bir dünyada, Parentgörüntülerin yalnızca bir kez oluşturulmasını istiyorum . Model (ler) değiştiğinde herhangi bir yeniden oluşturma işleminin gerçekleştirilmesi çocuklarının görüşlerine bağlıdır. Childdiğer yandan, onlara ihtiyaç duydukları başka görüşlere sahip olmadıkları için ihtiyaç duydukları her an yeniden oluşturmalarına izin veriyorum.
Biraz daha ayrıntılı olarak, Parentgörünümler için initializeişlevlerimin birkaç şey yapmasını istiyorum :
- Kendi görüşümü başlat
- Kendi görüşümü oluştur
- Alt görünümler oluşturun ve başlatın.
- Her alt görünümü benim görüşümdeki bir öğeye atayın (örneğin
InfoViewatanır #info).
Adım 1 oldukça açıklayıcıdır.
Adım 2, oluşturma işlemi, atamaya çalışmadan önce çocuğun görüntülediği tüm öğelerin zaten varolması için yapılır. Bunu yaparak, tüm çocukların eventsdoğru şekilde ayarlanacağını biliyorum ve herhangi bir şeyi yeniden devretmek zorunda kalmadan endişelerini duymadan bloklarını istediğim kadar tekrar oluşturabilirim. Aslında renderburada hiçbir çocuk görüşüm yok, bunu kendi başlarına yapmalarına izin veriyorum initialization.
Adım 3 ve 4 aslında elalt görünümü oluştururken geçerken ele alınır . Buraya bir öğe iletmeyi seviyorum, çünkü ebeveynin kendi görüşüne göre çocuğun içeriğini nereye koymasına izin verildiğini belirlemesi gerektiğini hissediyorum.
ParentGörüntüleme için, görünümler için oldukça basit tutmaya çalışıyorum . renderFonksiyonun üst görünümden başka bir şey yapmamasını istiyorum . Etkinlik yetkisi yok, çocuk görüşlerinin görüntülenmesi yok, hiçbir şey yok. Sadece basit bir render.
Bazen bu her zaman işe yaramaz. Örneğin yukarıdaki #nameörneğimde, modeldeki ad değiştiğinde öğenin güncellenmesi gerekecektir. Ancak, bu blok ParentViewşablonun bir parçasıdır ve adanmış bir Childgörünüm tarafından ele alınmaz , bu yüzden bunun etrafında çalışırım. Yalnızca öğenin içeriğinin yerini alan ve tüm öğeyi çöpe atmak zorunda olmayan bir tür subRenderişlev oluşturacağım . Bu bir hack gibi görünebilir, ancak gerçekten tüm DOM'u yeniden oluşturma ve öğeleri yeniden bağlama endişesi olmaktan daha iyi çalıştığını gördüm. Gerçekten temiz yapmak isteseydim , bloğu kaldıracak yeni bir görünüm yaratırdım .#name#parentChildInfoView#name
Şimdi Childgörünümler için, daha fazla görünüm oluşturmadan, görünümlere initializationoldukça benzer . Yani:ParentChild
- Görüşümü başlat
- Kurulum, önem verdiğim modelde yapılan değişiklikleri dinlemeyi bağlar
- Görüşümü oluştur
Childgörüntüleme oluşturma da çok basit, sadece benim içeriğini oluşturmak ve ayarlamak el. Yine, delegasyonla veya bunun gibi bir şeyle uğraşmak yok.
İşte benim nasıl ParentViewgörünebilir bazı örnek kod :
var ParentView = Backbone.View.extend({
el: "#parent",
initialize: function() {
// Step 1, (init) I want to know anytime the name changes
this.model.bind("change:first_name", this.subRender, this);
this.model.bind("change:last_name", this.subRender, this);
// Step 2, render my own view
this.render();
// Step 3/4, create the children and assign elements
this.infoView = new InfoView({el: "#info", model: this.model});
this.phoneListView = new PhoneListView({el: "#phone_numbers", model: this.model});
},
render: function() {
// Render my template
this.$el.html(this.template());
// Render the name
this.subRender();
},
subRender: function() {
// Set our name block and only our name block
$("#name").html("Person: " + this.model.first_name + " " + this.model.last_name);
}
});
Uygulamamı subRenderburada görebilirsiniz . Bunun subRenderyerine değişikliklere bağlı olarak render, tüm bloğu patlatmak ve yeniden inşa etmek konusunda endişelenmem gerekmiyor.
İşte InfoViewblok için örnek kod :
var InfoView = Backbone.View.extend({
initialize: function() {
// I want to re-render on changes
this.model.bind("change", this.render, this);
// Render
this.render();
},
render: function() {
// Just render my template
this.$el.html(this.template());
}
});
Bağlar burada önemli bir parçadır. Modelime bağlanarak asla renderkendimi manuel olarak aramaktan endişelenmem gerekmiyor . Model değişirse, bu blok diğer görünümleri etkilemeden kendini yeniden oluşturur.
PhoneListViewBenzer olacaktır ParentView, sadece hem de biraz daha mantık gerekir initializationve rendersap koleksiyonlarına fonksiyonlar. Koleksiyonu nasıl ele alacağınız tamamen size bağlıdır, ancak en azından koleksiyon etkinliklerini dinlemeniz ve nasıl oluşturmak istediğinize karar vermeniz gerekir (tüm bloğu ekleyin / kaldırın veya yalnızca yeniden oluşturun). Şahsen yeni görünümler eklemeyi ve eski görünümleri kaldırmayı seviyorum, tüm görünümü yeniden oluşturmuyorum.
PhoneViewNeredeyse aynı olacak InfoViewancak bunun umurunda model değişiklikleri dinleyerek.
Umarım bu biraz yardımcı olmuştur, lütfen bir şeyin kafa karıştırıcı olup olmadığını veya yeterince ayrıntılı olmadığını bildirin.