0

我正在开发一个级联视图的主干应用程序。有一个根视图在其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。我不希望它是那样的。

4

1 回答 1

0

这是因为您的根视图尚未附加到 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()
....

在这里，您注意到在渲染子视图之前eltha root已附加到 dom 。这将使它们逐渐出现。

于 2013-06-06T14:46:02.807 回答