通过其 ID 获取在 core:html 中定义的元素

Question

我用这一行在 view.xml 中定义了一个 canvas 元素：

<core:HTML content="&lt;div class=&quot;wrapper col-6&quot;&gt;&lt;canvas id=&quot;
myChart&quot;width=&quot;800&quot;height=&quot;400&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;"> 
</core:HTML>

现在我想获取控制器中的元素，但典型的 this.getView().byId("myChart") 似乎不起作用，即使该站点成功加载了带有 ID 的 canvas。

有没有办法在控制器的 core:HTML 标签内定义这些类型的元素？

如果没有，是否有不同的方法来创建 canvas 或其他 HTML 元素，以便我可以使用 ID 引用它们/在控制器中使用它们？

Answer 1

以这种方式创建的元素不像其他控件那样在 UI5 框架中 'registered'。 byId() 只检查 内部寄存器 。

您可以使用 jQuery 或标准 JavaScript 来获取元素，例如 $('#myChart') 或 document.querySelector('#myChart')。

您可以在 Core.js 或 Core-dbg.js 中找到代码。

Answer 2

正如 Jorg 所说，byId 用于检索控件。因此，如果您要在 HTML 控件上放置一个 id，您可以检索该控件，然后对其调用 getDomRef() 以获取最外层元素，在您的示例中为 div。如果您进一步只将 canvas 放在 HTML 控件中，您就会得到它。

如果您像 Jorg 所建议的那样直接访问 canvas 的 ID，如果您要在一个页面中两次使用该视图，您将运行遇到麻烦，因为canvas 的 ID 不再是唯一的。

还有第三个更好的选择，恕我直言，即直接在视图中使用 html。首先你需要为它声明一个命名空间，比如

xmlns:html="http://www.w3.org/1999/xhtml"

最好在您的视图元素上。

然后你可以直接在你的 xml 视图中写 html 像这样：

<html:div class="wrapper col-6">
  <html:canvas id="mycanvas" width="800" height="400"></html:canvas>
</html:div>

这样您就可以为您的 canvas 获取一个正确的（唯一的）ID，并且可以使用 this.getView().getDomRef("-mycanvas") 作为视图 dom 的一部分访问它。请注意额外的前导破折号，因为 UI5 中的内部 ID 生成不一致。还要注意 getDomRef() 被认为是受保护的，但我怀疑它会改变。最后，请记住您只能获得渲染控件的 domref，因此您可能希望从 afterRendering 事件访问它。

通过其 ID 获取在 core:html 中定义的元素

Getting an element defined in a core:html by its ID

sapui5