0

ビューをカスケードするバックボーン アプリケーションに取り組んでいます。initializeメソッド内に子ビューを作成し、独自の 内で子ビュー レンダリングを呼び出すルート ビューが 1 つあります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 がその場で表示されない理由がわかりません。そして、私はそれがそのようになりたくありません。

4

1 に答える 1

0

これは、ルート ビューがまだ dom に接続されていないためです。

ルート ビューをインスタンス化するとel、DOM のどこにもアタッチされていない独自の要素が作成されます (これは有効です)。次に、ルート ビューに追加される子ビューのレンダリングを開始しますが、まだルート要素がないため、画面には何も表示されません。これらのビューが非常に複雑な場合、このプロセスには時間がかかります。すべてが完了したら、ルートrender関数から戻り、ルートelが最終的に dom にアタッチされ、すべてが表示されます。

elこれを解決するには、ルートが dom にアタッチされた後にサブビューのレンダリングを行うことができます(その後、各ピースが段階的に表示されます)。このアプローチが優れていると言っているわけではありません。これは、このパフォーマンスの問題を解決する方法です。

アプローチの 1 つは次のようになります。

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 にアタッチされていることがわかります。これにより、それらが段階的に表示されます。

于 2013-06-06T14:46:02.807 に答える