[英]How do I get the height of a DOM element once the page has loaded in a Backbone / Marionette application?
I have a Backbone / Marionette layout with a few views in it. 我有一个Backbone / Marionette布局,上面有一些视图。 I need to adjust the height of two views (essentially, two divs currently with different heights) to be the same.
我需要将两个视图(实际上是两个当前具有不同高度的div)的高度调整为相同。
I used the $(document).ready(function () {});
我使用了
$(document).ready(function () {});
just before the closing body tag and after all the scripts that handle loading of the views to fetch the height but it outputs null. 就在关闭body标签之前,以及在所有处理视图加载以获取高度的脚本之后,但它输出null。 Why is that?
这是为什么? How do I get the heights of the following CompositeViews when the page has completed loading?
页面加载完成后,如何获取以下CompositeViews的高度?
List.TopQueries = Backbone.Marionette.CompositeView.extend({
template: "#topqueries-template",
itemView: List.QueryItem,
className: "block blue",
appendHtml: function (collectionView, itemView) {
// Do something here
},
onRender: function () {
// Do something here
},
onClose: function () {
// do something here
}
});
List.FailedQueries = Backbone.Marionette.CompositeView.extend({
template: "#failedqueries-template",
itemView: List.QueryItem,
className: "block red",
appendHtml: function (collectionView, itemView) {
// Do something here
},
onRender: function () {
// Do something here
},
onClose: function () {
// Do something here
}
});
For anything regarding checks in the UI that should be already attached to the DOM (like checking sizes of some divs as in your case), you shoud use the "onDomRefresh" event 对于UI中应该已经附加到DOM的检查(例如,检查某些div的大小),您应该使用“ onDomRefresh”事件
https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.view.md#view-domrefresh--ondomrefresh-event https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.view.md#view-domrefresh--ondomrefresh-event
Backbone.Marionette.ItemView.extend({
onDomRefresh: function(){
// manipulate the `el` here. it's already
// been rendered, and is full of the view's
// HTML, ready to go.
}
});
If you need to "wait" until certain views within your Layout have been rendered and fully attached to the DOM, you should listen to the onDomRefresh
of those views, not the one of the Layout. 如果您需要“等待”直到在Layout中的某些视图已呈现并完全附加到DOM上,则应侦听这些视图的
onDomRefresh
,而不是Layout之一。
The onDomRefresh
of the Layout will be triggered when the Layout itself is fully attached to the DOM. 当布局本身完全附加到DOM时,将触发布局的
onDomRefresh
。 It won't wait until all its child regions have shown a view (after all, you can show/close views in the Layout child regions at any moment, so that wouldn't have much sense). 它不会等到其所有子区域都显示一个视图(毕竟,您可以随时在Layout子区域中显示/关闭视图,这样就没有多大意义了)。
(I thought you were asking about Marionette Layouts, thus the explanation above, I leave it there as it might be worth knowing). (我以为您是在询问“木偶版式”,因此上面的解释,由于可能值得了解,我将其保留在此处)。
Nevertheless, what Evgeniy suggests about using CSS to handle the problem with no need of Javascript may be a better approach to solve your specific problem (what I answered is the leading question: How do I get the height of a DOM element once the page has loaded in a Backbone / Marionette application? ) 不过,叶夫根尼(Evgeniy)建议使用CSS来解决此问题而无需使用Javascript,这可能是解决您的特定问题的更好方法(我的回答是主要问题: 一旦页面显示后如何获取DOM元素的高度加载到主干/木偶应用程序中? )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.