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 这应该让我 select 例如柏林->男性->姓氏所以我需要 3 个级别的 ListItems。

第一个问题是：我可以用 JS 生成这个（为每个 staff 对象中的键等），但我不知道如何在 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？

编辑：我想要的是 "just" 像我在 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>

但是发生了一个错误：

Uncaught Error: Cannot add direct child without default aggregation defined for control sap.ui.core.ListItem

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

非常感谢，ho

Answer 1

不确定在您的情况下这是否是一种理想的方法，但考虑到您的模型的层次结构性质，也许 "Table - Breadcrumb" 的这个示例就是您正在寻找的：https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.m.sample.TableBreadcrumb/preview
它允许您 'drill deeper' 进入您的模型层次结构，并在需要时返回

但是我不确定它是否可以适应 'multi-level dropdownbox' 不过...

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

此外，为了向 "child" 下拉列表提供正确的绑定，您可以在从下拉列表中选择一个条目时将绑定设置为正确的路径。

请参阅以下重构模型（城市数组、性别数组和人员数组）以及下拉列表重新绑定的工作片段：

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>

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

SAPUI5 Complex data binding example with DropdownBox in XML view

xml

data-binding

json

sapui5