Başlat ve Oluştur bir görünüm ve subviews için üç farklı yolları var, ve her birinin farklı sorunları var. Eğer tüm sorunları çözer daha iyi bir yolu varsa bilmek istiyorum:

Bir Senaryo:

Ebeveynin başlatma fonksiyonu çocuk başlatılamadı. Bu şekilde, her şeyin daha az işleme engelleme var o yüzden bu hale takılıyor.

initialize : function () {

    //parent init stuff

    this.child = new Child();
},

render : function () {

    this.$el.html(this.template());

    this.child.render().appendTo(this.$('.container-placeholder');
}

Sorunlar:

• En büyük sorun ikinci kez üst render arama childs olay tüm bağlantıları çıkarın. ($.html() nasıl çalışır dolayıdır.) Bunun yerine this.child.delegateEvents().render().appendTo(this.$el); çağırarak hafifletilmiş olabilir, ama o zaman, ve çoğu zaman ilk davanın, daha fazla çalışmak gereksiz yere gidiyorsun.

• Çocukların ekleyerek, render işlevi istediğiniz sipariş almak, böylece ebeveynler DOM yapısı hakkında bilgi sahibi olmaya zorladın. Şablon değiştirme anlamına gelen bir görünüm vermek işlev güncelleme gerektirebilir.

Senaryo İki:

Başlatma üst çocuklar initialize() hala, ama eklemek yerine, setElement().delegateEvents() ebeveyn şablon bir öğe, çocuğun ayarlamak için kullanın.

initialize : function () {

    //parent init stuff

    this.child = new Child();
},

render : function () {

    this.$el.html(this.template());

    this.child.setElement(this.$('.placeholder-element')).delegateEvents().render();
}

Sorunlar:

• Bu ilk senaryoda sadece sonraki çağrılarda gerekli olan hafif bir negatif delegateEvents() artık gerekli kılıyor.

Senaryo Üç:

Ebeveyn çocuk render() yerine yöntem başlatılamıyor.

initialize : function () {

    //parent init stuff
},

render : function () {

    this.$el.html(this.template());

    this.child = new Child();

    this.child.appendTo($.('.container-placeholder').render();
}

Sorunlar:

• Bu render işlevi başlatma şimdi bütün mantık ile bağlı kalmak için iyi olduğu anlamına gelir.

• Ben çocuğun bir devlet görünümleri düzenlemek ve ana işlemek arayın, tamamen yeni bir çocuk yapılacak ve mevcut durumu kaybolur. Ayrıca, bellek sızıntıları için biraz riskli olabilir gibi görünüyor.

Gerçekten merak ettim sizin bu konuda kabul almak için. Hangi senaryo kullanırsınız? ya da bütün bu sorunları çözen bir dördüncü büyülü bir film var mı?

Hiç bir Görünüm için işlenmiş bir devlet takip ettiniz mi? renderedBefore bayrak demek? Çok kalitesiz görünüyor.

Bu çok güzel bir soru. Omurga yapar varsayımlar eksikliği nedeniyle büyük, ama (karar) bu sizin gibi şeyler uygulamak zorunda olduğunuz anlamına geliyor. Kendi eşyalarımı baktıktan sonra, ben (biraz) ve senaryo 2 senaryo 1 bir karışımı kullanın. 4. büyülü bir senaryo, yeterli, senaryo 1 ve 2 yaptığın her şey yapılmalı çünkü var olduğunu sanmıyorum.

En kolay bir örnek ile idare etmek istiyorum nasıl anlatabiliriz diye düşünüyorum. Bu basit sayfa belirtilen görüşleri içine kırık var

HTML, işlenmiş sonra, böyle bir şey olduğunu söylüyorlar

<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 diyagramı ile maç nasıl olduğu çok açık.

ParentView 2 çocuk görünümler InfoView PhoneListView olarak, #name, bir noktada ayarlanması gerekir bir kaç ekstra bir divs, tutar. PhoneListView kendi çocuğu görüşe sahip, PhoneView girdileri bir dizi.

Bu yüzden gerçek soru. Başlatma idare ettim ve farklı bakış Türüne göre işleme. İki tip olarak görüşlerimi kırarım, Parent manzaralı Child görünümler.

Basit onları o Parent arasında fark Child manzarası yok, bekleyin çocuk manzaralı. Yani benim örnekte, ParentView PhoneListView InfoView PhoneView girişleri Child görüş Parent manzarası vardır.

Gibi, bu iki kategori arasındaki en büyük fark işlemek için izin olduklarında önce bahsetmiştim. Mükemmel bir dünyada, Parent sadece bir kez oluşturmak için görüş istiyorum. Çocuk kendi görüşlerini bu model(ler) değiştirmek için yeniden oluşturmayı işlemek için. Child öte yandan, yeniden işleme izin verdiğim zaman onlara güvenmek başka manzarasına sahip olmadığı için, ihtiyaç duydukları manzarası.

Parent görünümler için biraz daha ayrıntılı olarak, initialize fonksiyonlarımı bir kaç şey yapmak istiyorum:

1. Benim kendi görüşüm başlatılamadı
2. Benim kendi görüşüm kılıyor
3. Ve herhangi bir çocuk görünümler oluşturmak başlatılamadı.
4. Her çocuk benim görünümü içinde bir öğe (örneğin InfoView #info atanmış olacaktır) görünümü atamak.

Adım 1 oldukça kendini açıklayıcı.

2, render, çocuğun görüşlerini herhangi bir öğe güveniyor yapılır adım zaten onları atamak için deneyin var. Bunu yaparak, events doğru ayarlanmış olacak çocuk biliyorum, Ve istediğim gibi yeniden işleme birçok kez olarak kendi blokları yeniden temsilci zorunda hakkında bir şey önemsemeden edebilirim. Aslında, burada bir çocuğun manzaralı render ben değil, onları initialization kendi içinde bunu yapmak için izin.

Ve 4 adım 3 aslında çocuk görünümü oluştururken el geçerken aynı anda işlenir. Ebeveyn kendi görünümünde alt içerik koymak için izin nerede olduğunu belirlemek gerektiğini düşünüyorum burada bir öğe geçirmek için seviyorum.

Render için Parent görünümleri için oldukça basit tutmaya çalışıyorum. render işlevi, hiçbir şey daha fazla işlemek üst görünümü daha yapmak istiyorum. Olay heyet, çocuk görüşlerin hiçbir işleme, hiçbir şey yok. Sadece basit bir render.

Bazen bu ama her zaman işe yaramıyor. Yukarıda benim örnekte örneğin, #name element model değişiklikleri içinde adı her zaman güncelleştirilmesi gerekir. Ancak, bu blok ParentView şablonun bir parçası ve Child özel bir görünüm tarafından ele değil, o işe girdim. subRender fonksiyonu olan bir çeşit yaratacağımsadece#name öğenin içeriğini değiştirir, ve #parent bütün element için çöp değil. Bu kesmek gibi, ama gerçekten çalışır buldum yeniden oluşturma hakkında endişelenmenize gerek kalmadan daha iyi tüm DOM ve tekrar takmadan elemanları ve bu gibi görünebilir. Eğer gerçekten temiz yapmak istiyorsan, #name blok üstlenecek Child yeni bir görünüm () InfoView benzer oluşturmak istiyorum.

Child görünümler initialization Parent görünümler, sadece Child başka görünümler oluşturma olmadan için oldukça benzer. Yani:

1. Benim görüşüme başlatılamadı
2. Kur değer verdiğim model için herhangi bir değişiklik için dinleme bağlar
3. Benim Render

Child render da çok basit, sadece render ve benim içeriği el ayarlanır görüntüleyin. Yine, heyet ya da böyle bir şey ile dalga geçmek yok.

İşte bazı örnek 60 ** benim gibi görünebilir ne 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);
    }
});

subRender benim uygulama burada görebilirsiniz. Değişiklikler render yerine subRender bağlı olmasından azaltmakta ve tüm bloğu yeniden oluşturma hakkında endişelenmenize gerek yok.

İşte InfoView blok için kod: örnek

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çasıdır. Benim model bağlama, ben hiç elle render kendimi arama konusunda endişelenmenize gerek yok. Eğer model değişirse, Bu blok başka bir görüş etkilemeden yeniden oluşturma kendisi.

PhoneListView ** 69, hem de biraz daha mantık gerekir initialization 71 *koleksiyonları işlemek için fonksiyonları benzer olacaktır. Nasıl başa koleksiyonu gerçekten sana bağlı, ama olacak en az ihtiyaç dinleme toplama etkinlikleri ve karar nasıl istediğiniz hale (Ekle/Kaldır, ya da sadece yeniden oluşturma tüm blok). Ben şahsen yeni görüntüler ekleyin ve eskileri yeniden oluşturma tüm görünüm değil kaldırmak gibi.

PhoneView umursadığını model değişiklikleri için ** 73, yalnızca dinleme hemen hemen aynı olacak.

Umarım bu biraz, lütfen bana her şeyi kafa karıştırıcı ya da ayrıntılı değil ise yeterli bildirin yardımcı oldu.