如何隐藏一个空面板？

Question

我的面板包含一些组件（表格，表单等），我将子组件的visible属性与模型绑定在一起。 有时面板中的所有组件都不可见。

在这些情况下，我也想使面板不可见。 我该怎么做？

这是我的面板代码：

<Panel expandable="true" expanded="true">
    <content>
        <f:SimpleForm>
            <Label text="MyLabel" />
            <Input visible="false" /> //set by a model binding, or by a function...or in other mode
        </f:SimpleForm>
    </content>
</Panel>

如果我在content聚合中控制控件的每个visible属性，我将没有正确的结果，因为即使面板为空， SimpleForm visible属性也设置为true （默认）

Answer 1

我将设置visible使用平板的所有内容使用绑定表达式绑定可见属性面板的特性：

<Panel visible="{= ${tableVisible} || ${/formVisible} || ${someOtherControlVisible} }">
    <content>
        <Table visible="{tableVisible}">...</Table>
        <Form visible="{formVisible}">...</Form >
        <Input visible="{someOtherControlVisible}">...</Input>
    </content>
</Panel>

但是，如果您的内容动态变化，我宁愿设置/删除内容，并检查面板的内容聚合长度：要隐藏的长度为0，否则可见

Answer 2

那么还可以控制表格的可见性吗？

<Panel
    visible="{= ${labelVisible} || ${/inputVisible} }"
    expandable="true"
    expanded="true">
    <content>
        <f:SimpleForm visible="{= ${labelVisible} || ${/inputVisible} }">
            <Label text="MyLabel" visible="{/labelVisible}"/>
            <Input visible = "{/inputVisible}"/>
        </f:SimpleForm>
    </content>
</Panel>

Answer 3

我找到了解决方案：

emptySimpleForm: function (a) {
        var bVisible = false;

        var aFormElements = this.mAggregations.form.mAggregations.formContainers[0].mAggregations.formElements;
        _.forEach(aFormElements, function (oEl) {

            _.forEach(oEl.mAggregations.fields, function(oFld){
                if (oFld.getProperty('visible') === true)
                    bVisible = true;
            })
        })
        return bVisible;

},

emptyPanel: function (a) {
        var bVisible = false;

        var aContent = this.mAggregations.content;
        _.forEach(aContent, function (oEl) {
            if (oEl.getProperty('visible') === true)
                bVisible = true;
        })

        return bVisible;
},

添加对格式化程序功能的引用：

<Panel  visible="{path: 'model>/', formatter: 'ui5bp.Formatter.emptyPanel'}" />


<f:SimpleForm visible="{path: 'model>/', formatter: 'ui5bp.Formatter.emptySimpleForm'}" />

现在我想在xml中插入表达式绑定和我的格式化程序功能

像这样

visible="{= ${myPropOnModel} && ui5bp.Formatter.emptyPanel   }"