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

Preview

03_preview.png

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속성에 바인딩이 된다. 이때 바인딩 경로의 시작 부분에 있는 /는 절대 바인딩 경로를 나타낸다.

Binding Types

Property Binding