UI5：在每次導航期間渲染后訪問視圖的 DOM 引用

Question

我有兩個 UI5 XML 視圖，並且在兩個視圖之間實現了導航。 每當我訪問第二個視圖時，我都會操作 HTML DOM（使用 jQuery 和 CSS）來進行一些外觀和感覺相關的更改，這些更改在 UI5 中默認不可用。

我的問題是：當我編寫 jQuery 代碼以在第二個視圖的(route)patternMatched處理程序中操作 DOM 時，它不起作用，因為那時 DOM 不存在。 當我將 jQuery 代碼放在第二個視圖的onAfterRendering()中時，它僅在第一次訪問期間執行，因此在第二次訪問期間不會給出所需的結果。

你能告訴我如何擺脫這個問題或者我應該在這里做哪些設計改變嗎？

另外，我們在 UI5 中是否有任何設置，每次導航到視圖時都會調用onAfterRendering() ？

Answer 1

您可以使用onBeforeShow方法進行您需要的操作。

每次視圖將要顯示在屏幕上時，都會調用onBeforeShow 。

但首先您必須將事件附加到 onInit 中的視圖。 代碼：

onInit : function () {
    this.getView().addEventDelegate({
        onBeforeShow : jQuery.proxy(function(evt) {
            this.onBeforeShow(evt);
        }, this)
    });
},

onBeforeShow: function() {

    console.log('called from on Before show');
    // DO manipulation here
}

如果您仍然沒有在此事件處理程序中找到 DOM 元素，請記住onBeforeShow有一個姐妹： onAfterShow ，它將在視圖顯示在屏幕上之后調用。

API 鏈接：NavContainerChild