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>