Режимы рендеринга каскадных линий

Question

Я работаю над базовым приложением, которое каскадирует представления. Существует один корневой вид, который создает свои дочерние представления внутри своего метода initialize и вызывает просмотр дочернего представления внутри собственного render. Это может выглядеть следующим образом:

initialize: function(options) { 
    console.log('body'); 
    this.template = tpl({}); 
    this.headerView = new HeaderView(options); 
    this.chartView = new ChartView(options); 
    this.footerView = new FooterView(options); 
}, 

render: function() { 
    console.log("body"); 
    this.$el.html(this.template); 
    this.headerView.setElement(this.$el.find('.header')).render(); 
    this.chartView.setElement(this.$el.find('.chart')).render(); 
    this.footerView.setElement(this.$el.find('.footer')).render(); 
    return this; 
} 

Все виды ребенка идут точно так же - они делают себя внутри своего метода render и вызвать render на своих детей.

Мой вопрос: почему после окончательного рендеринга завершается отображение всей страницы? Моя страница довольно сложная, и загрузка занимает 4 секунды, и у меня есть пустая страница. У меня много консольных выходов, где я отчетливо вижу, что некоторые из представлений уже отображены.

Я не понимаю, почему такие большие количества HTML не отображаются «на лету». И я не хочу, чтобы это было так.

Answer 1

Это потому, что ваш корневой вид еще не привязан к dom.

Вы создаете экземпляр корневого представления, который создаст собственный элемент el, который не прикреплен нигде в dom (это законно). Затем вы начинаете рендеринг дочерних представлений, которые присоединяются к корневому представлению ... но все же отсутствует корневой элемент, поэтому на экране ничего не отображается. Если эти представления сложны, этот процесс займет некоторое время. Когда все будет сделано, вы вернетесь из своей корневой функции render, и корень el, наконец, прикреплен к dom, отображая все.

Чтобы решить эту проблему, вы можете выполнить рендеринг подвью, после того, как корень el был прикреплен к dom (тогда вы увидите каждую часть постепенно). Я не говорю, что этот подход лучше, просто это способ решить эту проблему производительности.

Один из подходов может выглядеть примерно так:

RootView = Backbone.View.extend({ 

    // your initialize is here 

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

    createHeaderView: function() { 
     this.$el.find('.header').append(this.headerView.render().el); 
    } 

}); 

var root = new RootView() 
$('body').append(root.render().el) 
root.createHeaderView() 
.... 

Здесь вы заметили, что тха корень el прикрепляется к йот перед тем на подвиды оказаны. Это заставит их появляться постепенно.