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已附加到dom 。这将使它们逐渐显示。

主干渲染级联视图

1 个答案: