📌 概要

前章では,双方向バインド手法を見たが,binding instanceによりViewにバインドされたモデルにおける一方向バインド手法を見てみよう.

📌 例

チェックボックスがどの状態であるかにかかわらず、inputフィールドは入力のために開いたままになります.一方的なdatabindingは、モデルからUIにデータが流れることを保証するため、他の方向にデータが流れることはありません.👊
bindingモード(一方向または双方向)はモデル自体に設定されます.したがって、バインドインスタンスは、特に変更しない限り、常にデフォルトモデルのバインドモードを使用して作成されます.参照として、JSOnModelのデフォルトbinding modeは、この例でtwo-wayを使用してbinding modeを変更します.

MainView.view.xml

						<Panel headerText="{/panelHeaderText}" class="sapUiSmallMargin" width="auto">
							<form:SimpleForm editable="true" layout="ResponsiveLayout">
								<Label text="First Name"/>
								<Input value="{/firstName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}"/>
								<Label text="Last Name"/>
								<Input value="{/lastName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}"/>
								<Label text="Enabled"/>
								<CheckBox selected="{/enabled}"/>
								<Label text="Check Current Model"/>
								<Button text="press button" press="checkCurrentDataModel" width="200px"/>
								<Label text="initialize Model"/>
								<Button text="refresh button" press="refreshDataModel" width="200px"/>
							</form:SimpleForm> 
						</Panel>

MainView.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"sap/ui/model/BindingMode"
],
	/**
	 * @param {typeof sap.ui.core.mvc.Controller} Controller
	 */
	function (Controller, JSONModel, BindingMode) {
		"use strict";

		return Controller.extend("databinding.controller.MainView", {
			onInit: function () {
				this.doOneWayDatabinding();
			},

			doOneWayDatabinding: function() {
				const oModel = new JSONModel(this.getOwoWayModelData());
				oModel.setDefaultBindingMode(BindingMode.OneWay);
				this.getView().setModel(oModel);
				console.log(oModel);
			},
            
			checkCurrentDataModel: function() {
				const oModel = this.getView().getModel();
				console.log('checkCurrentDataModel!');
				console.log(oModel);
				console.log(oModel.getData());
				// ... model 관련된 다양한 메소드 존재 📝
			},

			refreshDataModel: function() {
				console.log('refreshDataModel!');
				this.getView().getModel().setData(this.getOwoWayModelData()); // 기존 data model과 동일하기에 refreash해도 ui 변경 X
			},
            
            		getOwoWayModelData: function() {
				return {
					firstName: "Jonghwa",
					lastName: "Hong",
					enabled: true,
					panelHeaderText: "One-way Data Binding"
				};
			},

コンソールから分かるように、View(UI)では、ユーザーが入力を変更してもモデルのデータは変更されません.

📌 バインドモードを変更するには:

例に示すように、モデルのdefault bindingモードを変更します.

oBindiingInfo.modeparameterは、特定のバインディングインスタンスのデータバインディングモードを指定します.この変更は、データバインドインスタンスにのみ適用されます.他のすべてのバインドインスタンスは、モデルのデフォルトのバインドモードを使用し続けます.詳細については、API Reference: sap.ui.base.ManagedObject.bindPropertyを参照してください.

💡 に注意
1.デフォルトのバインドモードを変更しても、既存のバインドインスタンスには影響しません.
2.上記の例のように、デフォルトのバインドモードを変更した場合、明示的にバインドモードを変更しない限り、その時点以降に作成されたすべてのバインドinstanceは、変更されたバインドモードを使用します.

🔗 リファレンス

sapui sdk one-way databinding