📌 개요

이전 챕터에서는 sap.m.Input 필드를 사용하여 성과 이름 input 필드를 표시하여 두 필드에 Two-way databinding을 적용해보자.

📌 Example

• 실습
  - JSONModel을 통해 input 필드에 binding (Model -> View)
  - View(UI)에서 JSONModel data 변경 가능 (View -> Model)
  => Two-Way(양방향) 🤟
  

• MainView.view.xml
  property binding 사용.

						<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

			onInit: function () {
				// ...
				this.doTwoWayDatabinding();
			},
			doTwoWayDatabinding: function() {
				const oModel = new JSONModel(this.getTwoWayModelData());
				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.getTwoWayModelData());
			},

			getTwoWayModelData: function() {
				return {
					firstName: "Jonghwa",
					lastName: "Hong",
					enabled: true,
					panelHeaderText: "Two-way Data Binding"
				};
			}

• press button and check console
  

1. check current model
   

🔗 해당 실습예제 github 참조.

💡 JSONModel, ODataModel 등과 같은 Model에 관련된 메소드들이 다양하게 존재하는데 이를 유용하게 활용하며 databinding을 사용하면된다. 추후 Model관련해서 관련 글을 게시하겠다.

🔗 참조 링크

• sapui5 sdk two-way databinding