在 SAPUI5 App 中显示和隐藏 sap.m.Panel答案

【问题标题】：Show and hide sap.m.Panel in SAPUI5 App在 SAPUI5 App 中显示和隐藏 sap.m.Panel
【发布时间】：2015-09-15 19:59:13
【问题描述】：

在我的 sapui5 应用中，我有 4 个面板，使用 sap.m.Panel 控件创建。

var oPanel1 = new sap.m.Panel({
    headerText : "1",
}); 
var oPanel2 = new sap.m.Panel({
    headerText : "2",
});
var oPanel3 = new sap.m.Panel({
    headerText : "3",
});
var oPanel4 = new sap.m.Panel({
    headerText : "4",
});

现在我想添加一个设置按钮，其中包含一个包含复选框元素作为面板名称的表单，默认情况下，所有面板名称都在表单中选中。

如果我想通过取消选中设置表单中的任何面板名称来隐藏任何面板。

在SAPUI5中是否可以，如果可以，如何？

【问题讨论】：

标签： sapui5

【解决方案1】：

您可以通过将属性绑定到模型属性来使面板的可见性成为条件。在下一步中，您将复选框的选中状态绑定到相同的模型属性。

var oModel = new sap.ui.model.json.JSONModel({
    panels: {
        1: {
            visible: true
        }
    }
});

var oPanel1 = new sap.m.Panel({
    headerText : "1",
    visible: "{panelModel>/panels/1/visible}"
}); 
oPanel1.setModel(oModel, "panelModel");

var oCheckBox1 = new sap.m.CheckBox({
    selected: "{panelModel>/panels/1/visible}",
    text: "1"
});
oCheckBox1.setModel(oModel, "panelModel");

【讨论】：