Step 5: One-Way Data Binding

이전 튜토리얼인 양방향 바인딩 동작과 달리 단방향 데이터 바인딩은 데이터가 한 방향으로만 전송된다.
모델에서 바인딩 인스턴스를 통해 사용자에 전달되지만 다른 방향으로는 전달되지 않는다.
이번 튜토리얼에선 이전 예제를 단방향 데이터 바인딩으로 변경한다.
사용자 인터페이스에서 모델로 돌아가는 데이터 흐름에 대해 설명한다.

Preview

Coding

Data Binding - Step 5.

webapp/index.js

sap.ui.require([
	"sap/ui/model/json/JSONModel",
	"sap/ui/core/mvc/XMLView",
	"sap/ui/model/BindingMode"
], function (JSONModel, XMLView, BindingMode) {
	"use strict";

	// Attach an anonymous function to the SAPUI5 'init' event
	sap.ui.getCore().attachInit(function () {
		// Create a JSON model from an object literal
		var oModel = new JSONModel({
			firstName: "Harry",
			lastName: "Hawk",
			enabled: true,
			panelHeaderText: "Data Binding Basics"
		});

		oModel.setDefaultBindingMode(BindingMode.OneWay);

		// Assign the model object to the SAPUI5 core
		sap.ui.getCore().setModel(oModel);

		// Display the XML view called "App"
		new XMLView({
			viewName: "sap.ui.demo.db.view.App"
		}).placeAt("content");
	});
});

oModel.setDefaultBindingMode(BindingMode.OneWay);을 추가하여 Enable 체크 박스에 상관없이 단방향 데이터가 모델에서 UI로만 전달되고 다른 방향으로 전달되지 않는다.

양방향, 단방향 바인딩은 모델 자체에서 설정이 된다. 따라서 특별히 신경쓰지 않아도 바인딩 인스터스는 모델의 기본 바인딩 모드를 사용하여 항상 만들 수 있다.

바인딩 모드를 변경하려면 아래와 같이 두가지 방법이 있다.

• 모델의 기본 바인딩 모드를 변경하는 방법 (위의 예제에 있는 방식)

• oBindingInfo.mode 매개 변수를 사용하여 특정 바인딩 인스턴스에 대한 데이터 바인딩 모드를 지정한다. 이는 데이터 바인딩 인스터스에만 적용이된다.
  다른 바인딩 인스턴스는 모델의 기본 바인딩 모드를 계속 사용한다. API Reference: sap.ui.base.ManagedObject.bindProperty.

note:
모델 객체의 데이터 바인딩 모드를 변경하는 것에 대해 이해하려면 두 가지 중요한 점이 있다.
1) 모델의 기본 바인딩 모드를 변경하면 명시 적으로 다르게 지정하지 않는 이상 이 시점 이후에 작성된 모든 바인딩 인스턴스는 변경된 바인딩 모드를 사용한다
(위 예에서처럼 single-way가 계속적용됨)
2) 모델의 기본 바인딩 모드를 변경해도 기존 바인딩 인스턴스에는 아무런 영향을 미치지 않는다.