backbone.js - Backbone.Marionette onRender 回调在浏览器中呈现 View 之前触发？

Question

那个设定

我有 Backbone.Marionette.ItemView 呈现一些内容。当内容呈现时，我想应用一个 jQuery 插件，它将 View 的一部分变成一个带有滚动条的容器。

滚动条完全用 javascript 实现，初始化时它必须检查滚动容器的高度以及容器内内容的高度。

如果内容高于容器，则应启用滚动条。

问题

虽然这一切听起来很简单，但我遇到了一个奇怪的问题:

如果我直接在 onRender 回调中初始化我的滚动条插件，它似乎认为 .scroll-container 元素的高度为 0，maxHeight 为 0。

如果我将初始化代码包装在 0ms 超时内，一切都会正常工作，jQuery 正确返回 .scroll-container 元素的高度属性，并且滚动条插件效果很好。

编码

onRender: function() {
  var that = this;
  setTimeout(function() {
    that.onLayout();
    var $scrollContainer = that.$el.find('.scroll-container'), 
        scrollPane = new ScrollPane($scrollContainer, {
          maxHeightProperty: 'maxHeight',
          scrollUpButton: false,
          scrollDownButton: false
        });
  }, 0);
},

问题

我假设出现问题是因为在执行 onRender 回调时浏览器没有完成实际渲染新插入的 html。

这个假设正确吗？如果是这样，在正常情况下，我使用 0ms 超时的解决方案是否可靠？

Answer 1

由于有问题的插件依赖于 DOM，onRender不会做你需要的。此回调在 View 呈现后开始，但不能保证 View 的 el已添加到 DOM 中。事实上，您可以安全地假设相反 - 它尚未添加。

如果您使用的是 Marionette Region要显示 View ，您可以实现 onShow你认为的方法。在区域将 View 添加到 DOM 之后，该方法被区域调用。它是专门为处理这种情况而实现的。

有关这方面的更多信息以及使用 jQuery 插件的一般信息，请参阅此博客文章:http://lostechies.com/derickbailey/2012/02/20/using-jquery-plugins-and-ui-controls-with-backbone/