백본 렌더링 계단식보기

Question

저는 계단식보기가되는 백본 응용 프로그램을 만들고 있습니다. initialize 메서드 내에서 자식 뷰를 만들고 자식 뷰 렌더링을 자체의 render 내부에서 호출하는 하나의 루트 뷰가 있습니다. 자신의 render 방법 안에 그들 자신을 렌더링하고 자녀에 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; 
} 

모든 아이 뷰는 같은 ​​길을 갈 : 그것은 다음과 같이 보일 수 있습니다.

내 질문은 왜 마지막보기가 렌더링을 마친 후에 전체 페이지가 표시됩니까? 내 페이지는 꽤 복잡하고로드하는 데 4 초가 걸리고 그동안 빈 페이지가 있습니다. 나는 분명히 볼 수있는 많은 콘솔 출력을 가지고 있으며, 일부 뷰는 이미 렌더링되어 있습니다.

왜 그렇게 많은 양의 HTML이 표시되지 않는지 이해할 수 없습니다. 그리고 저는 그렇게되기를 원하지 않습니다.

Answer 1

루트보기가 아직 DOM에 연결되어 있지 않기 때문입니다.

루트보기를 인스턴스화하면 dom의 어느 곳에서나 첨부되지 않은 el 요소가 생성됩니다 (이는 합법입니다). 그런 다음 루트 뷰에 추가되는 하위 뷰 렌더링을 시작하지만 여전히 루트 요소가 누락되어 화면에 아무 것도 표시되지 않습니다. 이러한보기가 매우 복잡한 경우이 프로세스에는 다소 시간이 걸립니다. 모든 일이 끝나면 루트 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가 파단의 렌더링 전에 DOM 에 연결되어 있는지주의 사항 : 접근

하나는 같은 것을 볼 수 있었다. 이렇게하면 점진적으로 나타납니다.