javascript - 如何隐藏空面板？

Question

我有panels包含一些组件(表格、表单等)我将子组件的可见属性与我的模型绑定(bind)在一起。有时面板中的所有组件都不可见。

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

这是我的面板代码:

<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 聚合中控制 Control 的每个 visible 属性，我不会得到正确的结果，因为即使面板为空，SimpleForm 将 visible 属性设置为 true(默认)

Answer 1

我将使用表达式绑定(bind)使用面板的所有内容绑定(bind)可见属性来设置面板的 visible 属性:

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

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