[英]UI5: accessing DOM ref of a view after rendering during each navigation
I have two UI5 XML views and the navigation has been implemented between both the views.我有两个 UI5 XML 视图,并且在两个视图之间实现了导航。 Whenever I visit the second view, I manipulate the HTML DOM (using jQuery and CSS) to do some look and feel related changes which is not readily available in UI5 by default.
每当我访问第二个视图时,我都会操作 HTML DOM(使用 jQuery 和 CSS)来进行一些外观和感觉相关的更改,这些更改在 UI5 中默认不可用。
My issue is: When I wrote jQuery code to manipulate DOM in (route)patternMatched
handler of second view, it is not working as DOM does not exist at that point.我的问题是:当我编写 jQuery 代码以在第二个视图的
(route)patternMatched
处理程序中操作 DOM 时,它不起作用,因为那时 DOM 不存在。 When I put the jQuery code in onAfterRendering()
of second view, it gets executed only during first visit so not giving the desired result during 2nd visit onwards.当我将 jQuery 代码放在第二个视图的
onAfterRendering()
中时,它仅在第一次访问期间执行,因此在第二次访问期间不会给出所需的结果。
Can you tell me how to get rid of this issue or what design change I should make here?你能告诉我如何摆脱这个问题或者我应该在这里做哪些设计改变吗?
Also, do we have any setting in UI5 by which onAfterRendering()
will be called every time when I navigate to a view?另外,我们在 UI5 中是否有任何设置,每次导航到视图时都会调用
onAfterRendering()
?
You can use the onBeforeShow
method to do the manipulations required by you.您可以使用
onBeforeShow
方法进行您需要的操作。
The onBeforeShow
will be called every time the view is about to be shown to the screen.每次视图将要显示在屏幕上时,都会调用
onBeforeShow
。
But first you have to attach the event to the view in onInit.但首先您必须将事件附加到 onInit 中的视图。 Code:
代码:
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
}
If, you still don't find the DOM elements in this event handler, remember onBeforeShow
has a sister: onAfterShow
which will be called after the view is shown on screen.如果您仍然没有在此事件处理程序中找到 DOM 元素,请记住
onBeforeShow
有一个姐妹: onAfterShow
,它将在视图显示在屏幕上之后调用。
API Link :NavContainerChild API 链接:NavContainerChild
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.