那个设定
我有 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 超时的解决方案是否可靠?
最佳答案
由于有问题的插件依赖于 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/
关于backbone.js - Backbone.Marionette onRender 回调在浏览器中呈现 View 之前触发?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11874541/