javascript - 在 Backbone.js 中插入后如何知道 DOM 何时再次准备就绪

Question

我正在使用 Backbone.js 开发一个应用程序。

当我切换页面时，当前页面的全局 View 被替换为新页面的 View 。在该 View 中，我有一个典型的“渲染”函数，它用新模板替换了正文 html。

我的问题是，在更改 html 和 DOM 后，如何在 DOM 再次准备就绪时执行函数？

我必须使用它，因为我需要滚动到一个元素并在 render() 不起作用后执行我的 scrollTo() 函数($(myElement).offset().top 总是返回 0)。

这是我的代码:

module.exports = BaseView.extend({
    initialize: function () {
        this.render();
        $('html, body').scrollTop(this.$("#toScroll").offset().top);
    },
    template: require('./templates/home'),
    render: function () {
        this.$el.html(this.template());
        return this;
    }
});

谢谢。

Answer 1

如果您的 View 的 el 在 DOM 中并且您的 #toScroll 在 View 的 el 中，那么 #toScroll 将在您说出此内容后立即出现在 DOM 中:

this.$el.html(this.template());

但是，在浏览器再次获得控制权之后(即在您的 View 完成所有工作之后)，HTML 才会被渲染。在浏览器呈现所有内容之前，el 中的元素不会有任何大小或位置信息(当然，除非您手动定位和调整所有内容)。事件的顺序是这样的:

1. v = 新 View 。
2. initialize 被调用并调用 render。
3. render 设置 DOM 中的所有内容。
4. View 调用 this.$('#toScroll').offset() 并获取零值。
5. View 尝试将 scrollTop 归零。
6. 浏览器取回控制权。
7. 浏览器渲染一切，这个过程计算你想要的位置和偏移量。

您只需要在 7 之后获得 4 和 5。

一个简单的方法是将位置/大小相关的东西放在 _.defer 中回调:

initialize: function () {
    this.render();
    var _this = this;
    _(function() {
        $('html, body').scrollTop(_this.$("#toScroll").offset().top);
    }).defer();
}

您还可以使用 setTimeout延迟为零，但 _.defer 让您的意图更清晰。

演示:http://jsfiddle.net/ambiguous/tWSBE/