Как связать элементы с таблицей sap.m.table в JS с правильным использованием шаблона - PullRequest
Новая
       39

Как связать элементы с таблицей sap.m.table в JS с правильным использованием шаблона

1 голос
/ 09 апреля 2020

Я пытаюсь привязать элементы к таблице sap.m.table в JS. Привязка XML не разрешает динамическую фильтрацию c, так что это не вариант.

Сценарий довольно базовый c: Первый экран представляет собой представление списка. Второй экран - это подробный вид выбранной записи в виде списка. Подробное представление содержит таблицу с дополнительной информацией, и в каждой строке пользователь может выбрать одну из двух переключателей и нажать кнопку действия, чтобы выполнить выбранное действие. Информация о том, какая радио-кнопка включена и предварительно выбрана, также возвращается из бэкэнда и считывается из модели. Модель имеет двустороннюю привязку для отражения и реагирования на изменения пользователя в контексте, но ничего никогда не записывается обратно в бэкэнд.

Я хотел бы запустить следующий код в _onObjectMatched () после того, как запись была нажата на первом экране. 

oTable.bindItems({
   path: 'Model>/pathToEntitySet',
   filters: aFilter,
   factory: function(sId, Context) { return that.byId('template').clone(sId);
   templateShareable: false,
   parameters: {
      'expand': 'anotherPath'
   }
});

Шаблон определен в XML в таблице : 

<core:FragmentDefinition
  xmlns:core="sap.ui.core"
  xmlns="sap.m"
  xmlns:l="sap.ui.commons.layout"
  xmlns:table="sap.ui.table"
  xmlns:semantic="sap.m.semantic">
      <Table
        id="table"
        alternateRowColors="true">
        <columns>
            ...
        </columns>
        <dependents>
            <ColumnListItem id="template">
                <cells>
                    ...
                    <FlexBox>
                        <RadioButtonGroup columns="2" selectedIndex="{Model>SelectedAction}">
                            <RadioButton 
                                enabled="{= ${Model>isPos1}}"
                                text="{i18n>doThis}"/>

                            <RadioButton
                                enabled="{= ${Model>isPos2}}"/>
                        </RadioButtonGroup>
                        <ComboBox
                            items="{
                                path: 'Model>anotherPath',
                                templateShareable: false
                            }"
                            selectedKey="{Model>SelectedKey}"
                            enabled="{= ${Model>isPos2}}">
                            <core:ListItem key="{Model>Tey}" text="{Model>Text}"/>
                        </ComboBox>
                        <Button id="actionButton" 
                                press="onActionButtonPress" 
                                enabled="{= ${Model>isPos1} || ${Model>isPos2}}"
                                icon="sap-icon://begin"/>
                        <Label text="{Model>SelectedAction}"/> <!--Just for debugging purpose-->
                    </FlexBox>
                </cells>
            </ColumnListItem>
        </dependents>
      </Table>
</core:FragmentDefinition>

При первом выборе записи на экране все загружается правильно. First Loading

Затем я go возвращаюсь и снова нажимаю на ту же строку, и внезапно все значения для Model> SelectedAction отображаются как -1. В анализе сети в браузере я вижу, что ответ от бэкэнда правильный, но как-то все превращается в -1 во внешнем интерфейсе. Second Loading

Мне наконец-то удалось это исправить, добавив эти две строки перед oTable.bindItems ({}). Я ожидал, что отмена привязки вручную не требуется до изменения привязки. Кроме того, я не понимаю, почему я должен сбросить модель (двустороннее связывание), даже если я не делал никаких изменений, таких как выбор другой радиокнопки. 

oTable.unbindItems();
this.getView().getModel("Model").resetChanges();

Страница сведений по-прежнему ведет себя странно. Я не могу выбрать переключатель. Вместо этого, когда я нажимаю радио-кнопку, они исчезают на миллисекунду и просто появляются снова. Я мог бы исправить это, заменив фабрику шаблоном в функции привязки: 

oTable.bindItems({
   path: 'Model>/pathToEntitySet',
   filters: aFilter,
   template: that.byId("template").clone(),
   templateShareable: false,
   parameters: {
      'expand': 'anotherPath'
   }
});

Этот код, кажется, работает, но у меня нет хорошего представления об этом. Чувствует себя не очень стабильно. Например, почему UI5 не может позаботиться о клонировании моего шаблона? Если я не буду клонировать его вручную, ошибка пропущенного шаблона будет возникать при втором открытии подробного представления. И почему я должен отсоединять элементы вручную и переустанавливать модель?

Можете ли вы дать некоторую обратную связь, если я делаю что-то в корне неправильно или это действительно так, как это должно работать?

...