在浏览器中呈现视图之前,Backbone.Marionette onRender回调会触发吗？

Question

那个设定

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

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

如果内容高于容器,则应启用滚动条.

问题

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

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

如果我将初始化代码包装在0ms超时内,但一切都按原样运行,.scroll-container元素的height属性由jQuery正确返回,滚动条插件工作得很好.

代码

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因此无法满足您的需求.渲染视图后,此回调会启动,但无法保证视图el已添加到DOM中.事实上,你可以安全地假设相反 - 它还没有被添加.

如果您使用Marionette Region来显示视图,则可以在视图中实现onShow方法.在区域将视图添加到DOM之后,该方法将由区域调用.它专门用于处理这种情况.

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