无法以编程方式将内容添加到XML视图中的简单HTML DIV元素

Question

我有一个简单的XML视图（片段），如下所示：

<html:div id="holder"></html:div>

我想以编程方式添加内容：

var holder = this.byId("holder");
var label = new sap.m.Label({
    text: "Label"
});

holder.addContent(label);

效果不算什么，没有错误，没有添加内容。 为什么不起作用？

Answer 1

这是因为content不是聚合（这是一个容易犯的错误，因为content通常 是聚合的。）

sap.ui.core.HTML的{​​{1}}元数据对象是 string 类型的属性。来自the jsdoc：

  

要显示的HTML内容，定义为字符串。

您需要为标签使用不同的容器，例如content，或者您可以使用原始HTML粘贴在sap.ui.layout.VerticalLayout对象中，而不是holder类型

Here是一个jsbin，它将此问题的XML视图部分排除在等式之外。

注意：有关在XML视图中使用sap.m.Label时的重要区别，请参阅下面的@ hirse评论

Answer 2

HTML元素和UI5控件不直接兼容。 UI5控件是具有渲染功能的JavaScript对象。 render函数根据需要创建html片段。然后将该html片段插入到页面中。

我从未尝试过，但解决方法可能是使用标签的placeAt()方法：

label.placeAt("holder");

如果您使用的是XML视图， holder ID将被添加前缀。然后你应该使用这样的东西：

label.placeAt(this.getView().createId("holder"));

Answer 3

您可以使用sap.ui.core.Element类的getDomRef来获取UI5控件的DOM元素。

然后使用placeAt()

将您的内容添加到此DOM元素中

Here正在运作。