绑定聚合相对于父选择

时间:2015-11-04 13:06:42

标签: sapui5

我有一个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);

但它也没有用。

4 个答案:

答案 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/

enter image description here

答案 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 );
                }
            });
相关问题