頁面加載到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元素的高度加載到主干/木偶應用程序中？ ）