Step 2: Creating a Model

opensapkr·2019년 7월 2일

ui5-Data Binding

목록 보기

3/14

이번 튜토리얼에선 응용 프로그램이 있는 데이터의 컨테이너로 모델을 만들어 바인딩해본다.

모델 내의 데이터는 다양한 형식을 사용하여 만들 수 있다.

JavaScript Object Notation (JSON)
Extensible Markup Language (XML)
OData
사용자 정의 포맷 (튜토리얼에선 다루지 않음)

note:
resource model이라는 특수 유형의 모델이 있다. 해당 유형은 Resource Bundle 파일 주위의 wrapper 오브젝트로 사용된다.
이러한 파일의 이름은 .properties로 끝나야하며 일반적으로 다국어 텍스트로 사용한다.
Step 6: Resource Models.

JSON, XML 및 자원 모델을 작성하면 포함 된 데이터가 단일 요청으로 로드된다.(클라이언트에 로컬로 저장된 파일 또는 웹 서버에서 요청하여.
모델의 데이터가 요청 된 후 전체 모델이 응용 프로그램에 로드된다.
이러한 모델을 client-side model이라고하며 필터링 및 정렬과 같은 작업은 클라이언트에서 로컬로 수행된다.

그러나 OData 모델은 server-side model이다.
응용 프로그램이 모델의 데이터를 필요로 할 때마다 서버에서 요청한다.
이러한 요청은 일반적으로 모델의 모든 데이터를 반환하지 않는다.
이는 클라이언트 응용 프로그램에 필요한 것보다 훨씬 많은 데이터이기 때문이다.
따라서 정렬 및 필터링과 같은 작업은 항상 서버에 위임되어야한다.

튜토리얼 짆랭은 JSON 모델로 초점을 맞춰 진행을 한다.

Preview

coding

Data Binding - Step 2.

webapp/index.js

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: "it is json model~!",
		});

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

		console.log(sap.ui.getCore().getModel())

		// Create a text UI element that displays a hardcoded text string
		new Text({text: "Hi, my name is Harry Hawk \n"}).placeAt("content");

		new Text({text: oModel.oData.greetingText}).placeAt("content");

	});
});