我有一个XML视图和一个控制器。
我的模型数据绑定到sap.m.Table
。问题是我必须将"items"
相对于我模型的某个数组元素绑定。
这些是我的模型数据:
[{
"type": "01",
"items": [{
"date": "20150720",
"amount": 53.20,
"paytype": "Cash"
}, {
"date": "20150720",
"amount": 23.20,
"paytype": "Cash"
}]
}, {
"type": "02",
"items": [{
"date": "20150720",
"amount": 515.6,
"paytype": "Credit Card"
}, {
"date": "20150720",
"amount": 3,
"paytype": "Something else"
}]
}]
我希望根据我的"items"
控件的选择更改将我的表绑定到Select
属性,该控件的字段类似于“type”属性绑定。
如何编写表格的items属性的路径? "data>/items/"
无效。
我考虑过将路径值绑定到外部模型的解决方案
pathModel
并根据选择对象的选择更改更新其属性:
我的观点:
<Table
id="dataTable"
items="{path>pathUrl}"
>
我的控制器:
newPath = "data>/"+ countPath +"/items/";
currentView.getModel("path").setProperty("/pathUrl", newPath);
但它也没有用。
答案 0 :(得分:2)
该问题描述了概念Element Binding的典型用例。
<Select
forceSelection="false"
change=".onSelectionChange"
items="{myModel>/}"
>
<core:Item
key="{myModel>typeKey}"
text="Type {myModel>type}"
/>
</Select>
<Table id="myTable" items="{myModel>items}">
<items>
<ColumnListItem>
<Text text="{myModel>paytype}"/>
<Text text="{myModel>amount}"/>
</ColumnListItem>
</items>
<!-- ... -->
</Table>
onSelectionChange: function(event) {
const selectedItem = event.getParameter("selectedItem");
this.byId("myTable").bindElement({
path: selectedItem.getBindingContext("myModel").getPath(), // e.g. "/1"
model: "myModel",
});
},
一旦从Select
控件中选择了一个项目,就会以所选项目作为参数调用onSelectionChange
。该项目包含一个绑定上下文 API ,可以通过.getBindingContext(/*modelName*/)
进行检索。从中调用getPath()
将返回绑定数据的绝对路径。如果是JSONModel,则路径将是类似索引的,例如"/0"
,"/1"
等。例如"/ProductSet('123')"
。
然后应将绝对绑定路径分配给API bindElement
。 API 元素目标中的所有 relative 绑定路径,例如"{myModel>items}"
,然后可以最终解析为向UI显示数据。
这是一个使用您的数据的有效示例:https://embed.plnkr.co/FOEY1JZIKFAJTApe/。
答案 1 :(得分:1)
我创建了一个简单的Plunker示例,它显示了一种实现所需内容的简单方法。 Check it out here.
onSelectChange: function (ev) {
var list = this.getView().byId("myList");
var index = ev.getParameter("selectedItem").getKey();
list.bindItems("/" + index + "/items",
new sap.m.StandardListItem({
title: "{amount}",
description: "{paytype}"
})
);
}
有一个带有更改处理程序的sap.m.Select控件,我们将表绑定到正确的items数组。
答案 2 :(得分:0)
你可以试试这个:
"Include conf/extra/httpd-8080.conf"
答案 3 :(得分:0)
我的解决方案,我认为这是最好的解决方案:为表格创建一个独立的模型,并在我更改选择控件时用第一个模型的项目填充它。
这是我的代码:
var itemsTable = currentView.getModel( "AdjustData" ); // this is my new mode bound to the table
var data = currentView.getModel( "data" ).getData();
// Set Type payment items
jQuery.each( data , function( index , item ) {
if ( item.type == mode ) {
itemsTable.setData( item.items );
}
});