Benim uygulamada biraz derin olsun ki iç içe manzaralı bir kurulum var. Başlatma aklıma gelen yol ve alt görünümleri ekleme işleme bir sürü vardır, ama yaygın bir uygulama nedir merak ediyorum.

Burada düşündüm birkaç:

initialize : function () {

    this.subView1 = new Subview({options});
    this.subView2 = new Subview({options});
},

render : function () {

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

    this.subView1.setElement('.some-el').render();
    this.subView2.setElement('.some-el').render();
}

Artıları:Ekleme ile DOM düzenini sürdürmek konusunda endişelenmenize gerek yok. Görüşlerini anda render işlevi kadar yok bu kadar erken başlatılır.

Eksileri:Pahalı olabilir ki? yeniden delegateEvents zorlanıyorlar(), Ana görünüm vermek işlevi olması gereken bir küme oluşturma tüm dolmasını mı? Şablon doğru tagNames korumak için gereken elemanlar tagName ayarlama özelliği yok.

Başka bir yol:

initialize : function () {

},

render : function () {

    this.$el.empty();

    this.subView1 = new Subview({options});
    this.subView2 = new Subview({options});

    this.$el.append(this.subView1.render().el, this.subView2.render().el);
}

Artıları:Yeniden temsilci olayları gerek yok. Sadece boş yer tutucuları içeren bir şablona ihtiyacın yok ve tagName geri görünüm tarafından tanımlanan.

Eksileri:Şimdi emin olmak için, doğru sırayla şeyler eklemek zorunda. Ana görünüm vermek hala küme oluşturma tarafından darmadağın.

onRender bir olay:

initialize : function () {
    this.on('render', this.onRender);
    this.subView1 = new Subview({options});
    this.subView2 = new Subview({options});
},

render : function () {

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

    //other stuff

    return this.trigger('render');
},

onRender : function () {

    this.subView1.setElement('.some-el').render();
    this.subView2.setElement('.some-el').render();
}

Artıları:Küme mantığı şimdi render() yöntemi görünümü ayrılır.

onRender bir olay:

initialize : function () {
    this.on('render', this.onRender);
},

render : function () {

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

    //other stuff

    return this.trigger('render');
},

onRender : function () {
    this.subView1 = new Subview();
    this.subView2 = new Subview();
    this.subView1.setElement('.some-el').render();
    this.subView2.setElement('.some-el').render();
}

Karışımı bir tür var ve bu örneklerin hepsi () özür dilerim genelinde farklı uygulamalar bir sürü ama tutmak veya eklersiniz olanlar nelerdir? eşleşti ve sen ne yapardın?

Uygulamaların özeti:

• render 14 *veya örneğini subviews?
• render alt görünüm oluşturma mantığı ya onRender performans?
• setElement append/appendTo kullan?

Genel olarak/farklı birkaç çözüm yolu zorundadır:

Çözüm 1

var OuterView = Backbone.View.extend({
    initialize: function() {
        this.inner = new InnerView();
    },

    render: function() {
        this.$el.html(template); // or this.$el.empty() if you have no template
        this.$el.append(this.inner.$el);
        this.inner.render();
    }
});

var InnerView = Backbone.View.extend({
    render: function() {
        this.$el.html(template);
        this.delegateEvents();
    }
});

Bu, bir kaç değişiklik ile: ilk örneğe benzer

1. Hangi alt öğeleri ekleme sırası önemlidir
2. Dış görünüm iç görünüm(s) (hala iç görünümünde tagName belirtebilirsiniz anlamı) ayarlamak için html öğeleri içermez
3. render() aradıktan SONRA iç görünümü öğesi olmuştur içine yerleştirilmiş bir DOM, şayet sizin iç görünüm render() yöntemdir yerleştirme/boyutlandırma kendisi sayfaya bağlı diğer elemanların konumu/boyutu (yaygın bir kullanım şekli, benim deneyim)

Çözüm 2

var OuterView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },

    render: function() {
        this.$el.html(template); // or this.$el.empty() if you have no template
        this.inner = new InnerView();
        this.$el.append(this.inner.$el);
    }
});

var InnerView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },

    render: function() {
        this.$el.html(template);
    }
});

Çözüm 2 temiz görünebilir, ama benim deneyim, bazı garip şeyler yarattı ve performansı olumsuz etkiledi.

Ben genelde Çözüm nedenlerle bir çift için 1, kullanım:

1. Görüşlerimi çok önceden render() kendi yöntemi DOM olmak güveniyor
2. Dış görünüm yeniden işlendiğinde, görüşlerini yeniden başlatma bellek sızıntıları neden olabilir ve mevcut bağlantıları ile garip sorunlara neden olan yeniden başlatılması, gerek yok

Eğer render() denir new View() Her zaman başlatma, başlatma delegateEvents() neyse arayacak unutmayın. Mutlaka bir olmamalı "ifade ettik.", con