javascript - 为 sapui5 中的自定义控件创建多个聚合的布局

Question

我创建了两个自定义控件。第一个自定义控件将另一个作为多个包含。我想在我的 XML View 中使用它们，如下所示:

<foo:Foo>
    <foo:FooItem>
    </foo:FooItem>
    <foo:FooItem>
    </foo:FooItem>
</foo:Foo>

我创建了我的父自定义控件 Foo 来创建容纳我的子控件的 FlexBox。

我的 Foo 元数据:

metadata: 
{
    properties:
    {
        "title": {type : "string", group : "Misc", defaultValue : ""}
    },
    aggregations : 
    {
        content: {singularName: "content"}
    },
    defaultAggregation: "content"
}

和我的 Foo 渲染器:

renderer : 
{

    render : function(oRm, oControl) {
        console.log("inoart.controls.Gauge.render()");


        var layout = oControl.createLayout();//creates FlexBox
        oRm.write("<div");
        oRm.writeControlData(oControl); 
        oRm.writeClasses();
        oRm.write(">");
        oRm.renderControl(layout);

        var aChildren = oControl.getContent();
        for (var i = 0; i < aChildren.length; i++) 
        { // loop over all child Controls, 

            oRm.write("<div>");
            oRm.writeStyles();

            layout.addItem(aChildren[i]);
            // I tried to add my child controls to this layout!!!

            oRm.renderControl(aChildren[i]);
            oRm.write("</div>");

        }

        oRm.addClass('verticalAlignment');
        oRm.write("</div>");
    }
}

我的观点如下:

<controls.Foo id="__Foo0">
    <sap.m.FlexBox id="__box0">
    <controls.FooItem id="__fooItem0">
        <sap.m.VBox id="__vbox0">
        <sap.m.FlexBox id="__box1">
    <controls.FooItem id="__fooItem1">
        <sap.m.VBox id="__vbox1">
        <sap.m.FlexBox id="__box2">

但我希望它是这样的:

<controls.Foo id="__Foo0">
    <sap.m.FlexBox id="__box0">
        <controls.FooItem id="__fooItem0">
            <sap.m.VBox id="__vbox0">
            <sap.m.FlexBox id="__box1">
        <controls.FooItem id="__fooItem1">
            <sap.m.VBox id="__vbox1">
            <sap.m.FlexBox id="__box2">

Answer 1

您对 oRm.renderControl 进行一次调用来渲染 FlexBox，然后在循环中对 oRm.renderControl 进行一些调用以获取聚合内容。由于所有这些 renderControl-Calls 都位于同一级别，因此所有内容都在同一级别上渲染。

将内容聚合中的项目添加到循环内的 FlexBox 内容聚合中为时已晚，因为 Flexbox 已经呈现。在每次重新渲染时向 Flexbox 添加项目也不是一个好主意。

1. 您可以从 sap.m.FlexBox 派生 Foo-Control 并覆盖渲染器以执行一些特殊操作。
2. 您可以覆盖 addContent、removeContent、getContent... 方法来委托(delegate)给内部 Flexbox addItem、removeItem、getItems 方法，因此您添加到内容聚合的内容实际上会添加到内部 Flexbox 的 Items 聚合中。
3. 您可以在 Foo 控件上使用 beforeRendering 方法将其所有内容添加到其内部 FlexBox 的项目聚合中。

希望这能给你一些帮助。