Типы взаимодействия модели и интерфейса в SAPUI5 (Binding Modes)
Существует 3 типа взаимодействия:
- One-Way — из модели данные передаются на view. При изменении модели, данные на представлении не меняются.
- Two-Way —из модели данные передаются на view и из view обновляется модель. При изменении модели, данные на представлении меняются сразу.
- One-Time — значение считывается только один раз, модель запрашивается только во время инициализации приложения.
Для наглядности создадим проект по шаблону. В контроллер представления abc.training.test4.controller.ViewMain добавим функцию onInit с моделью JSON и установим режим работы для модели OneWay:
- onInit: function() {
- // Ввод данных One-Way vs Two-Way Data Binding
- var oData = {
- country: "Россия",
- region: "Татарстан",
- city: "Нижнекамск"
- };
- var oModel1 = new sap.ui.model.json.JSONModel(oData);
- //var oModel1 = new sap.ui.model.json.JSONModel();
- //oModel1.loadData("data/data.json");
- // значение считывается из модели только один раз
- // oModel1.setDefaultBindingMode(sap.ui.model.BindingMode.OneTime);
- // из модели данные передаются на view
- oModel1.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
- // из модели данные передаются на view и из view обновляется модель
- //oModel1.setDefaultBindingMode(sap.ui.model.BindingMode.TwoWay);
- this.getView().setModel(oModel1, "inputData");
- }
В представлении abc.training.test4.view.ViewMain выведем поля модели в элементах управления <Input>, <Label> и <Text>:
- <mvc:View controllerName="abc.training.test4.controller.ViewMain"
- xmlns:html="http://www.w3.org/1999/xhtml"
- xmlns:mvc="sap.ui.core.mvc"
- displayBlock="true"
- xmlns="sap.m"
- xmlns:l="sap.ui.layout">
- <App>
- <pages>
- <Page title="Адрес">
- <content>
- <Label text="Страна" width="100%"/>
- <Input id="sCountry" width="100%" value="{inputData>/country}" valueLiveUpdate="true"/>
- <Label text="Регион" width="100%"/>
- <Input id="sRegion" width="100%" value="{inputData>/region}" valueLiveUpdate="true"/>
- <Label text="Город" width="100%"/>
- <Input id="sCity" width="100%" value="{inputData>/city}" valueLiveUpdate="true"/>
- <Text width="100%" text="Введенный адрес: {inputData>/country} {inputData>/region} {inputData>/city}"/>
- <Button text="Обновить значение модели из view (для One-Way)" press="onRefresh"></Button>
- </content>
- </Page>
- </pages>
- </App>
- </mvc:View>
Если посмотрим работу приложения, то увидим, что значение в <Text> не меняется. В представлении модель обновится только тогда, когда нажмем кнопку “Обновить значение модели из view (для One-Way)”, который запускает метод обновления данных в модели:
- onRefresh: function() {
- var oModel1 = this.getView().getModel("inputData");
- var lCountry = this.getView().byId("sCountry").getValue();
- var lRegion = this.getView().byId("sRegion").getValue();
- var lCity = this.getView().byId("sCity").getValue();
- oModel1.setData({
- country: lCountry,
- region: lRegion,
- city: lCity
- });
- }
Поменяем oModel1.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay) на oModel1.setDefaultBindingMode(sap.ui.model.BindingMode.TwoWay).
Запустим приложение, при изменении поля ввода в <Input>, текст в <Text> будет меняться.
Вызов метода oModel1.setDefaultBindingMode(sap.ui.model.BindingMode.TwoWay) можно и не делать, так как значение по умолчанию для модели JSON стоит two-way.
Типы взаимодействия для моделей данных SAPUI5
Resource Model: one-time.
JSON Model: one-way, two-way, one-time. При создании модели по умолчанию ставиться тип two-way.
XML Model: one-way, two-way, one-time. При создании модели по умолчанию ставиться тип two-way.
oData Model: one-way, two-way, one-time. При создании модели по умолчанию ставиться тип one-way.
Изменение типа от стандартной настройки, производится вызовом метода setDefaultBindingMode().
Данный пример можно посмотреть и импортировать к себе в SAP Web IDE здесь:
abc.training.test4_.zip