OpenUI5中的绑定和关系
[英]Binding and relationships in OpenUI5
问题描述
Currently, I am trying to build an interface in OpenUI5, which is supposed to allow managing relationships. 
当前，我正在尝试在OpenUI5中构建一个接口，该接口应该允许管理关系。 The whole application connects to the backend via oData. 整个应用程序通过oData连接到后端。
Consider the following example: Two entities, "Group" and "Person". 考虑以下示例：两个实体，“组”和“人”。 Each Group may consist of a number of Persons ("members"). 每个组可以由多个人员（“成员”）组成。 What I'd like to do is to list all the Groups in a table - and for each groups members, I'd like to present a MultiComboBox to select the Persons associated with the group, like so: 我想做的是在表格中列出所有网上论坛-对于每个网上论坛成员，我想展示一个MultiComboBox来选择与该网上论坛相关的人员，如下所示：
Setting up the views is easy, but I have some trouble regarding the bindings. 设置视图很容易，但是在绑定方面我有些麻烦。 Binding a collection (like "Groups") to a table and binding properties (like "name") to an item is no problem of course, but I have no clue how to bind a collection - which is a child of another collection - to a nested list so to speak. 将一个集合（例如“ Groups”）绑定到一个表并将属性（例如“ name”）绑定到一个项目当然没有问题，但是我不知道如何将一个集合（它是另一个集合的子代）绑定到可以说是一个嵌套列表。
I don't even know if it is possible at all, especially since I want not only the Persons currently affiliated with a group to show up in the combo box, but all others as well to be able to select them. 我什至不知道是否有可能，尤其是因为我不仅希望当前与某个组关联的人员出现在组合框中，而且还希望所有其他人都可以选择它们。 And of course, I want changes made in the interface to apply to the model as well... 当然，我也希望在界面中进行的更改也适用于模型...
Any hint towards a way to achieve the described functionality is much appreciated! 非常感谢获得实现所描述功能的方法的任何提示！
1 个解决方案
解决方案1
0 2015-05-07 14:32:01
Two different models are binded to the Table.. YOu can have Groups and Members as entities with navigation property as members you can play around here 表格绑定了两个不同的模型。您可以将“组”和“成员”作为实体，将导航属性作为成员， 您可以在此处玩耍
<!DOCTYPE HTML> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> <title>Mobile App in 23 Seconds Example</title> <script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"></script> <!-- only load the mobile lib "sap.m" and the Blue Crystal theme --> <script type="text/javascript"> var sampleData = { "Groups": [ { "GroupId": "D1", "GroupName": "Developers", "Members": [] }, { "GroupId": "D2", "GroupName": "GreenDay", "Members": [] }, { "GroupId": "D3", "GroupName": "BackStreet Boys", "Members": [] }, { "GroupId": "D4", "GroupName": "Managers", "Members": [] } ] }; var oModel = new sap.ui.model.json.JSONModel(sampleData); var aData = [ { key: "A", text: "John" }, { key: "B", text: "Sachin" }, { key: "C", text: "Dravid" }, { key: "D", text: "David" }, { key: "E", text: "Sunil" }, { key: "F", text: "Ronald" }, { key: "G", text: "Albert" } ]; var oMulti = new sap.m.MultiComboBox({ selectionChange: function (oEvent) { //change your group data? } }); oMulti.setModel(new sap.ui.model.json.JSONModel(aData)); var oTemplate = new sap.ui.core.Item({ key: "{key}", text: "{text}", customData: new sap.ui.core.CustomData({ key: "{GroupId}", value: "{GroupName}" }) }); oMulti.bindItems("/", oTemplate); //Build Table var oTable = new sap.m.Table({ columns: [ new sap.m.Column({ width: "150px", header: new sap.m.Label({ text: "Group Name" }) }), new sap.m.Column({ header: new sap.m.Label({ text: "Members" }) }) ] }).placeAt("content"); var oTemplate = new sap.m.ColumnListItem({ cells: [ new sap.m.Label({ text: "{GroupName}" }), oMulti ], press: function (oEvent) { alert(oEvent.getSource().getBindingContext()); } }); oTable.setModel(oModel); oTable.bindItems("/Groups", oTemplate); </script> </head> <body class="sapUiBody"> <div id="content"></div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.