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

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

  • 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

02_preview.png

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");

    });
});

테이터를 JSON모델로 만들어 인스턴스를 oModel로 저장한다. oModel은 sap.ui.getCore()의 oData로 코어 전체의 모델로 설정한다.
그러면 응용프로그램 어디서든 해당 객체를 전역적으로 사용할 수 있다.

note:
모델은 setModel()을 호출하여 모든 컨트롤에서 설정할 수 있다.
그런 다음 모델은 모든 자식 컨트롤로 전달되어 해당 모델에 액세스 할 수 있다.

Models

JSON Model