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 这应该让我选择例如柏林＆GT;阳 - ＆GT; lastName的所以我需要3个级别的ListItems。

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

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

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

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

编辑：我想要的是＆＃34;只是＆＃34;像HTML一样嵌套Listitems。我试过了，例如：

<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定义项目聚合？那会有用吗？

非常感谢，ho

Answer 1

在您的情况下不确定它是否是一种理想的方法，但鉴于您的模型的层次结构性质，也许这是一个＆＃34;表 - 面包屑＆＃34;是你正在寻找的：https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.m.sample.TableBreadcrumb/preview
它可以让你更深入地钻研＆＃39;进入您的模型层次结构，并在需要时退回

但我不确定它是否可以适应多级下拉框＆＃39;虽然...

编辑：我对你的JSON有了更全面的了解，看起来结构不正确。要向多个下拉列表提供数据，数据应采用数组格式，而不是对象格式。现在，您的JSON包含一个属性staff，其中包含多个属性berlin，paris等，而它应该是一个城市数组。我已修改了您的JSON，因此staff属性包含一个对象数组，其中包含一个包含对象数组的gender属性，该属性包含一个包含对象数组的person属性。 / p>

此外，为了给孩子提供正确的绑定＆＃34;下拉列表，您可以在从下拉列表中选择条目时将绑定设置为正确的路径。

请参阅以下有关重组模型的工作代码段（一系列城市，一系列性别和一系列人员），以及下拉列表的重新绑定：

＆＃13;

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");

＆＃13;

<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>

＆＃13;

SAPUI5在XML视图中使用DropdownBox的复杂数据绑定示例

1 个答案: