SAPUI5 поддерживает три типа привязки.

• Привязка Свойств (Property Binding). Привязка свойств позволяет элементу управления автоматически инициализироваться и обновляться из данных модели.
• Привязка агрегированием (Aggregation Binding). Агрегированная привязка может использоваться для автоматического создания дочерних элементов управления в соответствии с данными модели. Для агрегированной привязки требуется шаблон, который клонируется для каждой связанной записи модели.
• Привязка Элементов (Element Binding). Привязка элементов позволяет привязывать элементы пользовательского интерфейса к определенному объекту в данных модели, что создает контекст привязки и позволяет привязать элементу управления все его дочерние элементы. Это особенно полезно в сценариях master/detail.

Создадим в SAP Web IDE проект с примерами типов привязки.

Property Binding

Для типа Property Binding в представлении abc.training.test8.View.ViewMain выведем такую форму:

Элементы <RadioButton> управляют доступностью поля <Input> к редактированию. Для этого создали модель данных в контроллере:

Во view выведем форму с элементами управления для представления модели данных PropertyBinding:

<form:SimpleForm editable="true" width="auto" class="sapUiResponsiveMargin" layout="ResponsiveGridLayout" 
      title="Property Binding">
    <form:content>
        <RadioButton groupName="GroupA" selected="{PropertyBinding>/enabled}" text="Доступно изменение"/>
        <RadioButton groupName="GroupA" text="Блокировка"/>
        <Input enabled="{PropertyBinding>/enabled}" value="{PropertyBinding>/name}" valueLiveUpdate="true"/>
    </form:content>
</form:SimpleForm>

Aggregation Binding

Для вывода однотипных данных модели используется тип привязки Aggregation Binding.

В проекте, в папке json, создадим файл data.json с моделью данных, представляющий массив однотипных данных:

{
      "companies":
            [
                  { "name": "Нижнекамскнефтехим", "city": "Нижнекамск" },
                  { "name": "Эдельвейс", "city": "Казань" },
                  { "name": "КАМАЗ", "city": "Набережные челны" },
                  { "name": "Кристалл", "city": "Елабуга" },
                  { "name": "ТАНЕКО", "city": "Нижнекамск" }
            ]
}

В контроллере abc.training.test8.controller.ViewMain опишем модель данных:

var oModel2 = new sap.ui.model.json.JSONModel();
oModel2.loadData("json/data.json");
this.getView().setModel(oModel2, "AggregationBinding"); /* Модель с именем AggregationBinding */

В представлении выведем форму для модели данных AggregationBinding:

<form:SimpleForm editable="true" width="auto" class="sapUiResponsiveMargin" layout="ResponsiveGridLayout" 
      title="Aggregation Binding">
      <form:content>
            <List items="{AggregationBinding>/companies}">
                  <items>
                        <StandardListItem title="{AggregationBinding>name}" description="{AggregationBinding>city}" />
                  </items>
            </List>
      </form:content>
</form:SimpleForm>

Нам шаблоном будет служит тэг <StandardListItem>. Без единого кода программирования мы вывели в окне браузера массив данных!

Element Binding

Пример вывода Element Binding: при выборе из списка название отдела будут выводиться сотрудники этого отдела:

В проекте, в папке json, создадим файл data1.json со следующей моделью данных:

{
      "data":
      [
            { "otdel": "CO",
              "sotrudnik": [ {"name": "Иванов"}, {"name": "Петров"}, {"name": "Сидоров" } ]
            },
            { "otdel": "HR",
              "sotrudnik": [ {"name": "Хуснутдинов"}, {"name": "Юсупов"}, {"name": "давлетов" } ]
            },
            { "otdel": "LO",
              "sotrudnik": [ {"name": "Грудинин"}, {"name": "Жириновский"}, {"name": "Путин" }, {"name": "Медведев" } ]
            }
            
      ]
}

В контроллере abc.training.test8.controller.ViewMain опишем модель данных:

В представлении вью выведем форму с привязкой данных модели к различным элементам управления:

<form:SimpleForm editable="true" width="auto" class="sapUiResponsiveMargin" layout="ResponsiveGridLayout" 
      title="Element Binding">
      <form:content>
            <ComboBox id="idCombo" items="{/data}" selectionChange="onSelection" >
                  <items>
                        <core:Item text="{otdel}"/>
                  </items>
            </ComboBox>      
            <List id="idList" items="{sotrudnik}">
                  <items>
                        <StandardListItem title="{name}" />
                  </items>
            </List>
      </form:content>
</form:SimpleForm>

При изменении значения в <ComboBox>, массив значении в <List> должен замениться на соответствующие данные из модели. Для этого в <ComboBox> запрограммируем событие выбора элемента selectionChange=”onSelection”:

В функции onSelection определяется выбранный элемент {otdel}, и передается в элемент управления <List> соответственный массив данных {sotrudnik}.

Чтобы при начальной загрузке был выбран первый объект данных, добавили в функцию onInit следующий код:

Это будет выглядеть вот так:

Желаю удачи в изучении SAPUI5! Если возникнут вопросы, пишите в комментариях.