29

那个设定

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

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

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

问题

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

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

但是，如果我将初始化代码包装在 0ms 超时内，则一切正常，jQuery 正确返回 .scroll-container 元素的 height 属性，并且滚动条插件运行良好。

编码

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 超时的解决方案是否可靠？

4

1 回答 1

41

由于有问题的插件依赖于 DOM，onRender因此不会满足您的需要。这个回调在视图被渲染后启动，但不能保证视图el已经被添加到 DOM 中。事实上，你可以假设相反的情况是安全的——它还没有被添加。

如果您使用 MarionetteRegion来显示视图，则可以在视图中实现一个onShow方法。在区域将视图添加到 DOM 之后，该方法会被区域调用。它是专门为处理这种情况而实施的。

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

于 2012-08-09T00:30:29.237 回答