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