將json數據綁定到openui5中的Listbox和下拉框控件

Question

我是openui5的新手。任何人都可以幫助我，如何在openui5中將json數據綁定到Listbox和Dropdownbox控件（在我的情況下，我使用JSView和sap.ui.commons庫）。我在我的eclipse中有單獨的json文件，並且在這裏添加了我的代碼片段。

//Create Model 
var oModel = new sap.ui.model.json.JSONModel(); 
oModel.loadData("model/Transaction_State.json"); 
oTransstlistbx.setModel(oModel); 
oTransstlistbx.bindProperty("/state_name"); 

//Create a instance for ListBox 
var oTransstlistbx = new sap.ui.commons.ListBox({ 
    allowMultiSelect: true, 
    visibleItems: 4, 
    items: [ 
     new sap.ui.core.ListItem({ text: "sample1" }), //need to bind json data here 
     new sap.ui.core.ListItem({ text: "sample1" }), //need to bind json data here 
     new sap.ui.core.ListItem({ text: "sample3" }), //need to bind json data here 
    ] 
}); 

此數據來自Transaction_State.json文件。我能夠加載JSON數據，但我怎樣才能將數據綁定到列表框項目？任何幫助將不勝感激。

Answer 1

見這個例子https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.ComboBox/preview

如果這是在JSONmodel的JSON（products.json - 例如，它包含3條）

{ 
 
\t "ProductCollection": [ 
 
\t \t { 
 
\t \t \t "ProductId": "1239102", 
 
\t \t \t "Name": "Power Projector 4713", 
 
\t \t \t "Category": "Projector", 
 
\t \t \t "SupplierName": "Titanium", 
 
\t \t \t "Description": "A very powerful projector with special features for Internet usability, USB", 
 
\t \t \t "WeightMeasure": 1467, 
 
\t \t \t "WeightUnit": "g", 
 
\t \t \t "Price": 856.49, 
 
\t \t \t "CurrencyCode": "EUR", 
 
\t \t \t "Status": "Available", 
 
\t \t \t "Quantity": 3, 
 
\t \t \t "UoM": "PC", 
 
\t \t \t "Width": 51, 
 
\t \t \t "Depth": 42, 
 
\t \t \t "Height": 18, 
 
\t \t \t "DimUnit": "cm", 
 
\t \t \t "ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-6100.jpg" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t "ProductId": "2212-121-828", 
 
\t \t \t "Name": "Gladiator MX", 
 
\t \t \t "Category": "Graphics Card", 
 
\t \t \t "SupplierName": "Technocom", 
 
\t \t \t "Description": "Gladiator MX: DDR2 RoHS 128MB Supporting 512MB Clock rate: 350 MHz Memory Clock: 533 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 32-bit Highlighted Features: DVI Out, TV Out , HDTV", 
 
\t \t \t "WeightMeasure": 321, 
 
\t \t \t "WeightUnit": "g", 
 
\t \t \t "Price": 81.7, 
 
\t \t \t "CurrencyCode": "EUR", 
 
\t \t \t "Status": "Discontinued", 
 
\t \t \t "Quantity": 10, 
 
\t \t \t "UoM": "PC", 
 
\t \t \t "Width": 34, 
 
\t \t \t "Depth": 14, 
 
\t \t \t "Height": 2, 
 
\t \t \t "DimUnit": "cm", 
 
\t \t \t "ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-1071.jpg" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t "ProductId": "K47322.1", 
 
\t \t \t "Name": "Hurricane GX", 
 
\t \t \t "Category": "Graphics Card", 
 
\t \t \t "SupplierName": "Red Point Stores", 
 
\t \t \t "Description": "Hurricane GX: DDR2 RoHS 512MB Supporting 1024MB Clock rate: 550 MHz Memory Clock: 933 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 64-bit Highlighted Features: DVI Out, TV-In, TV-Out, HDTV", 
 
\t \t \t "WeightMeasure": 588, 
 
\t \t \t "WeightUnit": "g", 
 
\t \t \t "Price": 219, 
 
\t \t \t "CurrencyCode": "EUR", 
 
\t \t \t "Status": "Out of Stock", 
 
\t \t \t "Quantity": 25, 
 
\t \t \t "UoM": "PC", 
 
\t \t \t "Width": 34, 
 
\t \t \t "Depth": 14, 
 
\t \t \t "Height": 2, 
 
\t \t \t "DimUnit": "cm", 
 
\t \t \t "ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-1072.jpg" 
 
\t \t } 
 
\t \t 
 
}

您可以在初始化模式視圖的控制器

var oModel = new sap.ui.model.json.JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json")); 
     this.getView().setModel(oModel); 

然後在你的vonponent在XML視圖

<ComboBoxitems="{path: '/ProductCollection'}"> 
    <core:Item key="{ProductId}" text="{Name}" /> 
</ComboBox> 

，你必須設置路徑（在你的JSON數組的目錄）地圖和地圖要穩定物價https://openui5.hana.ondemand.com/explored.html#/entity/sap.m.ComboBox/properties到組件的每個屬性在模型中的財產