🌟 databinding을 실습하기에 앞서 datbinding의 개념을 상기하고 binding modes와 binding types에 대해 먼저 알아보자.

📌 개요

Data Binding: 데이터 바인딩은 컨트롤을 데이터 소스와 동기화된 상태로 유지하는 데 사용된다!!!
앞에서 이야기했듯이 데이터 바인딩을 수행하기위해서는 model과 binding instance가 필요하다. model instance는 애플리케이션 데이터와 서버로부터 데이터를 설정하거나 가져오기위한 다양한 메소드가 있다. 또한 바인딩을 생성하는 메소드가 포함되어 있다. 이 메소드를 호출하면 binding information와 애플리케이션 데이터에 변경이 발생할 때마다 트리거되는 이벤트 등을 같이 생성한다.

📌 binding modes

binding mode는 data source가 UI에 바인딩되는 방식을 정의한다.
SAPUI5에서는 세 가지 binding modes가 있다.

• One way binding : 데이터는 model -> view 로 전송된다. model data를 변경하면 해당하는 모든 binding과 view가업데이트된다.
• Two way binding : 데이터는 model -> view, view -> model로 전송된다. model에서 data 변경은 view의 control에 반영되고 view에서의 data 변경은 model로 반영된다.
• One time binding : 데이터는 model -> view로 한 번 흐른다. 일반적으로 i18n texts와 같은 정적인 모델에서 사용된다.
  

💡 SAPUI5는 Javascript 프레임워크를 기반으로하며 MVC에서 Model, View 및 Controller를 나타내는 MVC 아키텍처를 사용한다.

📌 binding types

SAPUI5에서는 다음의 binding types가 있다.

• Property binding : property binding은 control의 속성을 자동으로 초기화하고 model data에서 업데이트할 수 있다. control 속성을 일치하는 유형의 model 속성에만 바인딩하거나 formatter 또는 data types을 사용하여 필요에 따라 데이터를 분석하고 변환할 수 있다. 자세한 내용은 Forammtting, Parsing, and Validating Data를 참조.
• Context/Element binding : context binding(element binding)을 사용하면 바인딩 컨텍스트를 만드는 모델의 특정 객체에 element를 바인딩할 수 있으며 컨트롤과 모든 하위 객체 내에서 상대적 바인딩을 허용한다. 특히 마스터 세부 정보 시나리오에서 유용하다.
• Aggregation/List binding : list binding(aggregation binding)은 모델에 따라 하위 control을 자동으로 만드는데 사용한다. template control을 복제하거나 factory function을 사용할 수 있다. 모델에 정의된 list, 즉 JSON Model의 arrays 또는 OData 모델의 collection에만 바인딩할 수 있다.
• Expression binding : model data에 대한 계산이나 비교가 필요한 경우 유용하다.

example

• JSON Model

	const personalInfoJson = [{
				"Name": "jonghwahong",
				"Tel": "010-xxxx-xxxx",
				"Email": "zzzonghwa@gmail.com",
                			"address": {
					"street": "sangdo",
					"city": "Seoul",
					"country": "KR"
				}
			},{
				"Name": "gildonhong",
				"Tel": "010-xxxx-xxxx",
				"Email": "gildong@test.com",
                			"address": {
					"street": "jinsam",
					"city": "Sacheon",
					"country": "KR"
				}
			}];
		
			const oModel = new sap.ui.model.json.JSONModel();
			oModel.setData(personalInfoJson);
			this.getView().setModel(oModel);
			this.byId("testTable").setModel(oModel, "Items");

• Property binding

	<Text text="{/0/Name}"/>

• Context/Element binding : control을 model의 객체에 바인딩하여 context binding을 만들 수 있다. 따라서 control과 자식 내에서 상대적 바인딩을 허용한다.

	<l:VerticalLayout id="vLayout" binding="{/0/address}" width="100%">
							<Text text="{street}"/>
							<Text text="{city}"/>
							<Text text="{country}"/>
						</l:VerticalLayout>

• Aggregation/List binding : 하위 control은 model data를 기반으로 생성된다.

	<List id="testTable" headerText="human Details" items="{Items>/}">
							<ObjectListItem title="{Items>Name}"/> 
						</List>

• Expressiong binding

	<Text text="{= ${/0/Name} === 'johnhwahong' ? 'true jonghwa' : 'false jonghwa'}"/>

💡 One-way VS One-Time

위에서 적힌 글만 봐서는 One-way와 One-time의 차이점을 알기 어렵다. One-way와 Onew-time은 다음 링크에 상세히 정리 되어 있다. 꼭 읽어보길 바란다!

💡 Two-way binindg

• Two-way binding은 현재 property binding에 대해서만 지원된다. list binding과 같은 다른 binding types의 경우 엔티티 생성 또는 삭제는 특정 model에 따라 다르다.
  예를 들어 : list binding의 경우 OData V4 모델은 새 엔터티를 만들기 위한 sap.ui.model.odata.v4.ODataListBinding#create 메서드와 엔터티를 삭제하기 위한 sap.ui.model.odata.v4.Context#delete 메서드를 제공한다.
• formatter function을 사용할 때 바인딩은 자동으로 "One-way"로 전환된다. 따라서 "Two-way" 시나리오에서는 formatter function을 사용할 수 없지만 Data Types는 사용할 수 있다.

🔗 참고

• databinding blog1
• databinding blog2
• sapui5 databinding
• sapui5 binding types