Question

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

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的content属性中。渲染时，它看起来像这样：

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

我的目标是让一个带有类的周围div用于更好的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 View）

1 个答案: