Агрегирование привязки относительно выбора родителей

У меня есть представление 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 и обновить его свойство в соответствии с изменением выбора объекта select следующим образом:

Мой взгляд:

<Table
  id="dataTable"
  items="{path>pathUrl}"
>

Мой контроллер:

newPath = "data>/"+ countPath +"/items/";
currentView.getModel("path").setProperty("/pathUrl", newPath);

Но это тоже не работает.

Источник

4 ответа

Решение

Мое решение, и я думаю, что оно лучшее: создать независимую модель для таблицы и заполнить ее элементами моей первой модели при изменении элемента управления select.

Это мой код:

            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 );
                }
            });
Источник

Вопрос описывает типичный вариант использования концепции связывания элементов.

Посмотреть

<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"и т. д. В случае ODataModel; "/ProductSet('123')" например.

Абсолютный путь привязки должен быть назначен API bindElement, API Все относительные пути привязки внутри целевого элемента, например "{myModel>items}", может быть окончательно решен, показывая данные в пользовательский интерфейс.

Вот рабочий пример использования ваших данных: https://embed.plnkr.co/FOEY1JZIKFAJTApe?show=controller/Home.controller.js,preview.

Источник

Я создал простой пример Plunker, который показывает простой способ достичь того, что вы ищете. Проверьте это здесь.

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 с обработчиком изменений, в котором мы привязываем таблицу к соответствующему массиву элементов.

Источник

Можете ли вы попробовать это:

<Table id="myTable"
       items="{
       path: 'data>/items'
       }">
Источник
Другие вопросы по тегам