SAPUI5复杂的数据绑定与DropdownBox在XML视图

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 这应该让我选择，例如， berlin-> male-> lastname 所以我需要3个级别的ListItems。

第一个问题是：我可以用JS生成这个（为工作人员对象中的每个 键创建一个Listitem），但我不知道如何在XML视图中处理这个问题。 它看起来像这样的时刻：

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

并显示（当然）刚刚“{对象..}”在书房DropdownBox，因为它是一个对象。

这甚至可以在数据绑定的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> 

但母鸡发生错误，它说：

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

我如何定义一个列表项的项目聚集？这会起作用吗？

非常感谢，豪

Answer 1

不知道这是在你的情况下，可取的办法，但考虑到你的模型，可能的这个例子的分层特性“表 - 面包屑”是你在找什么为：https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.m.sample.TableBreadcrumb/preview
它可以让你“越钻越深”到模型的层次结构，并在必要时也

但我不知道这是否可以适应一个“多层次dropdownbox”虽然退一步了。 ..

编辑：我有一个更彻底的看你的JSON，它似乎stru cture不正确。 要向多个下拉菜单提供数据，数据应该是数组格式，而不是对象格式。现在，您的JSON包含一个属性staff，其中包含多个属性berlin，paris等，而它应该是一组城市。我修改了JSON，因此staff属性包含一组对象，其中包含一个gender属性，其中包含一个对象数组，其中包含一个包含对象数组的person属性。

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

见改组后的模型下面的工作片段（市阵列，性别的数组和人民数组），以及下拉菜单的重新绑定：

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>