UI5:如何访问视图中定义的html元素

UI5: How to access html element defined inside view?

本文关键字：视图 定义 元素 html 访问 何访问 UI5      更新时间：2023-09-26

我有一个具有以下视图的UIComponent：

<mvc:View controllerName="my.components.webmap.controller.Map"
   xmlns:mvc="sap.ui.core.mvc"
   xmlns="sap.m"
   xmlns:html="http://www.w3.org/1999/xhtml">
   <html:div id='myDiv' style='height:inherit'></html:div>
   <Button id="helloWorld" text="Say Hello" press=".onShowHello" />
</mvc:View>

在View控制器中，我可以从

this.getView().byId("helloWorld").sId

但是我无法使用byId()方法获得div的ID。

this.getView().byId("myDiv"); // returns undefined

如何获取div的ID以便访问元素？我需要div的ID，这样我就可以给它添加一些额外的第三方控件。

您可以使用createId将您的本地ID转换为全局ID，并将其与getElementById:一起使用

// After rendering
var divId = this.createId("myDiv"); // this == controller instance
document.getElementById(divId).whatEver

有一些可能的解决方案。让我们从UI5的角度来看看首选的。您的观点：

<mvc:View controllerName="yourcontroller" xmlns="sap.m" xmlns:layout="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml"> <Button press="btn" /> <layout:VerticalLayout id="layout"> </layout:VerticalLayout> </mvc:View>

您可以使用任何符合您要求的布局，当然也可以设置布局属性。在您的控制器中，按钮的事件处理程序：

btn: function(oEvent) { var oLayout = this.getView().byId("layout"); oLayout.addContent(new sap.m.Text({text: "test"})); }

-o-

如果你的api只支持div容器，你应该使用一些jQuery技巧：

var oDiv = $('[id*="myDiv"]');

但是，使用此解决方案，您将失去UI5特定的控制处理。

要回答如何获取HTML元素（div）的ID的问题，您还可以在控制器中组装ID，如下所示：

var sHTMLElementID = this.getView().sId.concat("--".concat("viewDiv"));

因此UI5仍然处理视图的id和前缀。

相关文章：