问题描述:

I have the following code and I'm trying to include a Text inside an HTML Element.

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>'

}),

The code is inside a CustomListItem's content attribute. When it gets rendered it looks like this:

<div class="left" data-sap-ui-preserve="__html0-__clone0" id="__html0-__clone0">

Element sap.m.Text#mengeLabelElement sap.m.Text#menge

</div>

My goal is to have a surrounding div with a class for better CSS positioning.

How can this be done with UI5?

网友答案:

content aggregation of the HTML control allows only string and here new sap.m.Text are casting to the string. You can create your own wrapper control.

        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>");
                }
            }
        });

And you can use it like this

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