将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到组件的每个属性在模型中的财产