将 sap.m.Text 包含到 sap.ui.core.HTML 元素中（JS 视图）

Question

我有以下代码，我正在尝试在 HTML 元素中包含一个文本。

new sap.ui.core.HTML({
                        content: 
                            '<div class="left">' +
                                new sap.m.Text("mengeLabel", {text: "Menge: "}).addStyleClass('list-label') +
                                new sap.m.Text("menge",{ text: "{Quantity}" }) +
                            '</div>'
                    }),

代码在 CustomListItem 的内容属性中。渲染后看起来像这样：

<div class="left" data-sap-ui-preserve="__html0-__clone0" id="__html0-__clone0">
  Element sap.m.Text#mengeLabelElement sap.m.Text#menge
</div>

我的目标是让周围的 div 和 class 更好地 CSS 定位。如何使用 UI5 完成此操作？

Answer 1

HTML 控件的内容聚合只允许字符串，这里新的 sap.m.Text 正在转换为字符串。您可以创建自己的包装器控件。

        sap.ui.core.Control.extend("my.Wrapper", {
            metadata : {
                defaultAggregation : "content",
                aggregations : {
                    content : {type : "sap.ui.core.Control", multiple : true }
                }
            },
            renderer: {
                render : function(oRm, oControl) {
                    oRm.write("<div");
                    oRm.writeControlData(oControl); 
                    oRm.addClass("myWrapper");
                    oRm.writeClasses();
                    oRm.write(">");
                    oControl.getContent().forEach(function(oChild) {
                        oRm.renderControl(oChild);
                    });
                    oRm.write("</div>");
                }
            }
        });

你可以这样使用它

new my.Wrapper({
    content: [
        new sap.m.Text("mengeLabel", {text: "Menge: "}).addStyleClass('list-label'),
        new sap.m.Text("menge",{ text: "{Quantity}" })
    ]
})

将 sap.m.Text 包含到 sap.ui.core.HTML 元素中（JS 视图）

Include a sap.m.Text into a sap.ui.core.HTML Element (JS View)

sapui5