Step 3: Create Property Binding

이번 튜토리얼은 모델 데이터로 바인딩 해본다.

Preview

Coding

Data Binding - Step 3.

sap.ui.require([
	"sap/m/Text",
	"sap/ui/model/json/JSONModel"
], function (Text, JSONModel) {
	"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({
			greetingText: "Hi, my name is Harry Hawk"
		});
		// Assign the model object to the SAPUI5 core
		sap.ui.getCore().setModel(oModel);

		// Display a text element whose text is derived
		// from the model object
		new Text({text: "{/greetingText}"}).placeAt("content");
	});
});

sap.m의 Text 컨트롤의 text 속성을 {/greetingText}값으로 설정한다.
바인딩 경로를 묶는 {}는 자동으로 바인딩으로 해석이 된다. 이러한 바인딩을 PropertyBinding이라고 한다.
Text컨트롤의 text 속성은 기본 모델의 루트에 있는 greetingText속성에 바인딩이 된다. 이때 바인딩 경로의 시작 부분에 있는 /는 절대 바인딩 경로를 나타낸다.

Related Information

Binding Types

Property Binding