页面加载到Backbone / Marionette应用程序后，如何获取DOM元素的高度？

Question

我有一个Backbone / Marionette布局，上面有一些视图。 我需要将两个视图（实际上是两个当前具有不同高度的div）的高度调整为相同。

我使用了$(document).ready(function () {}); 就在关闭body标签之前，以及在所有处理视图加载以获取高度的脚本之后，但它输出null。 这是为什么？ 页面加载完成后，如何获取以下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
}
});

Answer 1

对于UI中应该已经附加到DOM的检查（例如，检查某些div的大小），您应该使用“ onDomRefresh”事件

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.
    }
});

如果您需要“等待”直到在Layout中的某些视图已呈现并完全附加到DOM上，则应侦听这些视图的onDomRefresh ，而不是Layout之一。

当布局本身完全附加到DOM时，将触发布局的onDomRefresh 。 它不会等到其所有子区域都显示一个视图（毕竟，您可以随时在Layout子区域中显示/关闭视图，这样就没有多大意义了）。

（我以为您是在询问“木偶版式”，因此上面的解释，由于可能值得了解，我将其保留在此处）。

不过，叶夫根尼（Evgeniy）建议使用CSS来解决此问题而无需使用Javascript，这可能是解决您的特定问题的更好方法（我的回答是主要问题： 一旦页面显示后如何获取DOM元素的高度加载到主干/木偶应用程序中？ ）