Javascript SapUI5:具有另一个列表项的切换（隐藏/显示）的列表项

嘿，UI5是一个有很多可能性的框架，但有时我会把想法（在普通HTML中可能更容易）压在墙上。 这就是我想要的：一个列表项，显示柏林、洛杉矶、莫斯考等城市。在这里，你可以点击一个图标（首选，但也可以是一个按钮）。如果单击图标，则会显示另一个列表项，以便显示地址。如果单击该列表项，则会得到一个映射-映射部分正在工作，如果列表中有一个StandardListItem，则它将与列表一起工作。问题出在哪里？这不利于展示我想要的东西

例如：

• 柏林->点击->显示->123456示例街
• 莫斯考
• 洛杉矶

或：

• 柏林
• 莫斯考
• 洛杉矶->点击->显示->654321示例地址

我有：

注意：我删除了一些代码，所以您只能得到其中必要的部分

视图：

我还有一个本地演示数据json，它是从UpdateHelper加载的

---

备注：我不想使用$（）.hide、$（）.show和其他jquery工具，我更喜欢UI5。

如果您想显示或隐藏可以使用的列表项

myListItem.setVisible(true) //or
myListItem.setVisible(false)

---

但您也可以使用自定义列表项，将所有额外信息放入新的sap.m.Panel（），并在单击时将该面板添加到自定义列表项中（并销毁它/将其设置为不可见以隐藏额外信息）。

第一件事很明显，我不知道为什么我没有做到这一点！但是第二个对我来说有点难理解。我很少使用“newsap.m.example”，因为我使用的是xmlviews，但也许我只是误解了？请考虑给我一个代码示例。不要介意“新SAP.M.示例”。单击时将列表项中包含详细信息的面板设置为可见/不可见

jQuery.sap.require("www.adress.com.GeneralHelper");

sap.ui.controller("www.adress.com.LocationList", {

    onInit: function() {

        var bus = sap.ui.getCore().getEventBus();
        bus.subscribe("content", "updateSuccess", this.updateSuccess, this);

        sap.ui.getCore().getEventBus().publish("content", "update", {
            id : "Location"
        });
    },

    updateSuccess: function (channelID , eventID, data) {

        if (data.id === "Location") {

            var oModel = sap.ui.getCore().getModel("LocationModel");
            oModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
            this.getView().setModel(oModel);

            if (!jQuery.device.is.phone) {
                //preselect entry
                var self = this;
                var oList = this.byId("campusList");
                oList.attachUpdateFinished(function(evt) {
                    if (oList.getItems().length > 0) {
                        var oContext = new sap.ui.model.Context(self.getView().getModel(), "/0");
                        oList.setSelectedItem(oList.getItems()[0], true);
                        sap.ui.getCore().getEventBus().publish("nav", "to", {
                            id: "LocationDetail",
                            data : oContext
                        });
                    }
                });
            }
        }
    },

    handleListItemPress : function (evt) {
        sap.ui.getCore().getEventBus().publish("nav", "to", {
            id : "LocationDetail",
            data : evt.getParameters().listItem.getBindingContext()
        });
    }
});

myListItem.setVisible(true) //or
myListItem.setVisible(false)