XML 视图中带有 DropdownBox 的 SAPUI5 复杂数据绑定示例

Question

我构建了这个 JSON（测试为有效）（.. 不要介意这里的男人和女人的名字是一样的 :-)）：

{
    "staff": {
        "berlin": [{
            "male": [
                {"firstName": "Lasse", "lastName": "Larsson"},  
                {"firstName": "Gerrit", "lastName": "Gartner"}
            ],
            "female": [
                {"firstName": "Lasse", "lastName": "Larsson"},  
                {"firstName": "Gerrit", "lastName": "Gartner"}
            ]
        }],
        "paris": [{
            "male": [
                {"firstName": "Lasse", "lastName": "Larsson"},  
                {"firstName": "Gerrit", "lastName": "Gartner"}
            ],
            "female": [
                {"firstName": "Lasse", "lastName": "Larsson"},  
                {"firstName": "Gerrit", "lastName": "Gartner"}
            ]
        }],
        "oslo": [{
            "male": [
                {"firstName": "Lasse", "lastName": "Larsson"},  
                {"firstName": "Gerrit", "lastName": "Gartner"}
            ],
            "female": [
                {"firstName": "Lasse", "lastName": "Larsson"},  
                {"firstName": "Gerrit", "lastName": "Gartner"}
            ]
        }]
    }
}

在我的控制器中，我将 JSON 模型设置为整个视图，如下所示：

// init instance of JSON model
this.staffData = new sap.ui.model.json.JSONModel();
// load JSON file into model
this.staffData.loadData("ajax-dummy/staff.json");
// bind model to whole view 
this.getView().setModel(this.staffData);

在我的 XML 视图中，我现在想动态构建一个（嵌套的）DropdownBox 这应该让我选择例如 柏林->男性->姓氏 所以我需要 3 级 ListItems。

第一个问题是：我可以用 JS 生成这个（为每个构建一个 Listitem 键入人员对象等），但我不知道如何在 XML 视图中处理这个问题。 目前看起来是这样的：

<content>
<DropdownBox id="dd-locations" editable="true">
<core:ListItem text="{/staff/berlin}"></core:ListItem>
</DropdownBox>
</content> 

它（当然）只在 den DropdownBox 中显示 "{object ..}"，因为它是一个对象。

这甚至可以在带有数据绑定的 XML 视图中构建吗？或者有没有更好的结构方式 JSON？我知道 ListItems 需要一个数组...最后：如何嵌套 ListItems？有没有更好的控制 那么我应该使用 DropdownBox 吗？

编辑： 我想要的是“只是”嵌套 Listitems，就像我可以在 HTML 中一样。我试过了，例如：

<ComboBox>
                            <items>
                                <core:ListItem key="key2" text="text2"/>
                                <core:ListItem key="key3" text="text2">
                                    <ComboBox>
                                        <items>
                                            <core:ListItem key="key4" text="text3"/>
                                            <core:ListItem key="key5" text="text3"/>
                                            <core:ListItem key="key6" text="text3"/>
                                         </items>
                                    </ComboBox>
                                </core:ListItem>
                                <core:ListItem key="key4" text="text2"/>
                             </items>
                        </ComboBox>

但是当发生错误时：

未捕获的错误：无法添加没有默认聚合的直接子级 为控件定义 sap.ui.core.ListItem

如何为 ListItem 定义项目聚合？这行得通吗？

非常感谢，呵呵

Answer 1

不确定在您的情况下这是否是一种理想的方法，但考虑到您的模型的层次结构，也许您正在寻找这个“表格 - 面包屑”示例：https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.m.sample.TableBreadcrumb/preview
它允许您“深入”您的模型层次结构，并在需要时退后一步

但我不确定它是否可以适应“多级下拉框”...

编辑：我对您的 JSON 进行了更彻底的研究，但似乎结构不正确。 要将数据提供给多个下拉列表，数据应该是数组格式，而不是对象格式。现在，您的 JSON 包含一个属性 staff 和多个属性 berlin、paris 等，而它应该是一组城市。我已经修改了您的 JSON，所以 staff 属性包含一个对象数组，其中包含一个包含对象数组的 gender 属性，其中包含一个包含对象数组的 person 属性。

此外，为了向“子​​”下拉菜单提供正确的绑定，您可以在从下拉菜单中选择条目时将绑定设置为正确的路径。

请参阅下面的工作 sn-p 以了解重组后的模型（一组城市、一组性别和一组人），以及重新绑定下拉菜单：

sap.ui.controller("view1.initial", {
    onInit : function(oEvent) {
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData({
            "staff": [
                {
                    "city" : ""
                },
                {
                    "city" : "berlin",
                    "genders" : [
                        { 
                            "gender" : "male", 
                            "people" : [
                                {"firstName": "Lasse", "lastName": "Larsson"},  
                                {"firstName": "Gerrit", "lastName": "Gartner"}
                            ]
                        },
                        { 
                            "gender" : "female", 
                            "people" : [
                                {"firstName": "Paris", "lastName": "Hilton"},  
                                {"firstName": "Kate", "lastName": "Upton"}
                            ]
                        },
                    ]
                },
                {
                    "city" : "paris",
                    "genders" : [
                        { 
                            "gender" : "male", 
                            "people" : [
                                {"firstName": "Lasse", "lastName": "Larsson"},  
                                {"firstName": "Gerrit", "lastName": "Gartner"}
                            ]
                        },
                        { 
                            "gender" : "female", 
                            "people" : [
                                {"firstName": "Lasse", "lastName": "Larsson"},  
                                {"firstName": "Gerrit", "lastName": "Gartner"}
                            ]
                        },
                    ]
                },
                {
                    "city" : "oslo",
                    "genders" : [
                        { 
                            "gender" : "male", 
                            "people" : [
                                {"firstName": "Lasse", "lastName": "Larsson"},  
                                {"firstName": "Gerrit", "lastName": "Gartner"}
                            ]
                        },
                        { 
                            "gender" : "female", 
                            "people" : [
                                {"firstName": "Lasse", "lastName": "Larsson"},  
                                {"firstName": "Gerrit", "lastName": "Gartner"}
                            ]
                        },
                    ]
                },
            ]
        });
        this.getView().setModel(oModel);

    },

    handleStaffSelect : function(oEvent) {
        var oGender = this.byId("selGender");
        var oTemplate = new sap.ui.core.ListItem({ key : "{gender}", text : "{gender}"})
        oGender.bindItems(oEvent.getParameter("selectedItem").getBindingContext().getPath() + "/genders", oTemplate);
    },

    handleGenderSelect : function(oEvent) {
        var oGender = this.byId("selPerson");
        var oTemplate = new sap.ui.core.ListItem({ key : "{lastName}", text : "{lastName}"})
        oGender.bindItems(oEvent.getParameter("selectedItem").getBindingContext().getPath() + "/people", oTemplate);
    }
});

sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.m"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc">
        <Select id="selStaff" items="{/staff}" change="handleStaffSelect">
            <core:ListItem key="{city}" text="{city}" />
        </Select>
        <Select id="selGender" change="handleGenderSelect" />
        <Select id="selPerson" />
    </mvc:View>
</script>