📌 개요

이전 챕터에서는 Two-way(양방향) 바인딩 방법을 보았고 이제는 Model에서 binding instance를 통해 View로 바인되는 One-way(단방향) 바인딩을 살펴보자.

📌 예제

이제 checkbox에 어떤 상태에 있든 input 필드는 입력을 위해 열린 상태로만 유지된다. One-way databinding은 데이터가 model에서 UI로만 흐르고 다른 방향으로는 흐르지 않도록 하기 때문이다!👊

binding mode는 (one-way or two-way)는 Model 자체에 설정된다. 그래서 특별히 변경하지 않는 한 binding instance는 항상 기본 Model의 binding mode로 사용하여 생성된다. 참고로 JSONModel의 기본 binding mode는 two-way이게 해당 예제에서 one-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"
				};
			},

console을 찍어보면 알 수 있듯이 View(UI)에서 사용자가 입력을 변경해도 Model의 data가 변경되지 않음을 알 수 있다!

📌 binding mode 변경 방법

1. 해당 예제처럼 Model의 default binding mode를 변경한다.
2. oBindiingInfo.mode parameter를 사용해서 특정 binding instance에 대한 data binding mode를 지정한다. 이 변경은 data binding instance에만 적용된다. 다른 모든 binding instance는 Model의 기본 binding mode를 계속 사용한다. 자세한 내용은 API Reference: sap.ui.base.ManagedObject.bindProperty 참조.

💡 주의
1. 기본 binding mode를 변경해도 이미 존재하는 binding instance에는 영향을 미치지 않는다.
2. 위의 예처럼 기본 binding mode를 변경하는 경우 명시적으로 binding mode를 다르게 안하는 이상 해당 시점 이후에 생성된 모든 binding insntance는 변경된 binding mode를 사용한다.

🔗 참조

sapui sdk one-way databinding