json 在 XML 视图中使用 DropdownBox 的 SAPUI5 复杂数据绑定示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28454944/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SAPUI5 Complex data binding example with DropdownBox in XML view
提问by ho.s
I built this JSON (tested as valid) (.. don't mind that men and women are named the same here :-)):
我构建了这个 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"}
]
}]
}
}
In my controller I set the JSON model to the whole view like this:
在我的控制器中，我将 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);
In my XML view I would now like to dynamically build a (nested) DropdownBox which should make me select e.g. berlin->male->lastName So I need 3 levels of ListItems.
在我的 XML 视图中，我现在想动态构建一个（嵌套的）DropdownBox，它应该让我选择例如 berlin->male->lastName 所以我需要 3 个级别的 ListItems。
The first problem is: I could generate this with JS (build one Listitem for each key in the staff object etc.) but I have no idea how to deal with this in the XML view. It looks like this at the moment:
第一个问题是：我可以用 JS 生成它（为人员对象中的每个键构建一个 Listitem 等），但我不知道如何在 XML 视图中处理这个问题。目前看起来是这样的：
<content>
<DropdownBox id="dd-locations" editable="true">
<core:ListItem text="{/staff/berlin}"></core:ListItem>
</DropdownBox>
</content>
And it displays (of course) just "{object ..}"in den DropdownBox, because it IS an object.
它在 den DropdownBox 中（当然）只显示“{object ..}”，因为它是一个对象。
Is this even possible to build within the XML view with data binding? Or is there a better way to structure the JSON? I know the ListItems need an array... And finally: How can I nest the ListItems? Is there a better Control then DropdownBox I should use?
这甚至可以在带有数据绑定的 XML 视图中构建吗？或者有没有更好的方法来构建 JSON？我知道 ListItems 需要一个数组...最后：如何嵌套 ListItems？有没有比我应该使用的 DropdownBox 更好的 Control？
EDIT: What I want to have is "just" nesting Listitems like I could in HTML. I tried e.g.:
编辑：我想要的是“只是”像在 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>
But hen an error occurs which says:
但是当发生错误时，它说：
Uncaught Error: Cannot add direct child without default aggregation defined for control sap.ui.core.ListItem
未捕获的错误：如果没有为控件 sap.ui.core.ListItem 定义默认聚合，则无法添加直接子项
How can I define an item aggregation for a ListItem? Would that work?
如何为 ListItem 定义项目聚合？那行得通吗？
Thanks a lot, ho
非常感谢，呵呵
回答by Qualiture
Not sure if it is a desirable approach in your case, but given the hierarchical nature of your model, maybe this example of a "Table - Breadcrumb" is what you're looking for: https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.m.sample.TableBreadcrumb/preview
It allows you to 'drill deeper' into your model hierarchy, and step back up if needed too
不确定在您的情况下这是否是一种理想的方法，但考虑到您模型的层次结构，也许您正在寻找这个“表格 - 面包屑”示例：https: //sapui5.hana.ondemand.com /sdk/explored.html#/sample/sap.m.sample.TableBreadcrumb/preview
它允许您“深入”您的模型层次结构，并在需要时退回
But I'm not sure if it can be adapted to a 'multi-level dropdownbox' though...
但是我不确定它是否可以适应“多级下拉框”...
EDIT: I had a more thorough look at your JSON, and it seems the structure is not correct.
To supply data to multiple dropdowns, the data should be in Array format, not Object format. Right now, your JSON contains a property staffwith multiple properties berlin, paris, etc, whereas it should be an array of cities. I have modified your JSON so the staffproperty contains an array of objects, which contains a genderproperty containing an array of objects, which contains a personproperty containing an array of objects.
编辑：我更彻底地查看了您的 JSON，似乎结构不正确。要将数据提供给多个下拉列表，数据应该是数组格式，而不是对象格式。现在，你的JSON包含一个属性staff具有多个属性berlin，paris等等，而应该是城市的数组。我已经修改了您的 JSON，因此该staff属性包含一个对象数组，其中包含一个gender包含对象数组的person属性，该属性包含一个包含对象数组的属性。
Furthermore, in order to supply the correct binding to the "child" dropdowns, you could set the binding to the correct path upon selecting a entry from the dropdown.
此外，为了向“子”下拉列表提供正确的绑定，您可以在从下拉列表中选择条目时将绑定设置为正确的路径。
See the below working snippet for the restructured model (an array of cities, an array of genders and an array of people), and the rebinding of dropdowns:
请参阅以下重构模型的工作片段（城市数组、性别数组和人员数组）以及下拉列表的重新绑定：
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>