[UI5] Binding (Two-way& One-way)

체크박스를 해제하면 입력가능하게 필드를 열어준다.

App.view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
        controllerName="test.App" xmlns:html="http://www.w3.org/1999/xhtml">
    <Page title="Title">
        <content>
            <Label text="First Name" class="sapUi5SmallMargin" />
            <Input change=".firstChange" value="{/firstName}" valueLiveUpdate="true" enabled="{/enabled}" /> <!-- /프로포티 -->
            <Label text="Last Name" class="sapUi5SmallMargin" />
            <Input value="{/lastName}" valueLiveUpdate="true" enabled="{/enabled}" />
            <CheckBox selected="{/enabled}" text="Enabled" />
        </content>
    </Page>
</core:View>

바인딩을 하려면 중괄호 {}를 사용한다.
property를 가져오려면 /프로포티로 사용한다.
함수를 실행할땐 앞에 .을 붙여 사용한다.

App.controller.js

sap.ui.controller("test.App", {
    onInit: function() {
        var oModel = new sap.ui.model.json.JSONModel({    
            firstName: "Harry",
            lastName: "Hawk",
            enabled: false    
        });
        this.getView().setModel(oModel); 
    },    //양방향
//값이 변경되었을때
        firstChange : function () {
            var oModel = this.getView().getModel();    
        }    
});        

데이터를 뷰에 바로 바인딩할수 없다. 그래서 데이터를 모델에 담고 모델을 뷰에 바인딩한다.

뷰 모델 셋팅

1. 자바스크립트 객체생성(배열)
2. json모델 생성(1번에서 만든 객체를 인자로 받아서)
3. view에 모델을 셋팅(2번모델을 인자로 받아서), default모델 셋팅할땐 인자에 (json모델)만 사용하고 두개 이상일때는 인자에 (json모델, "모델이름") 입력

모델을 통해 데이터를 가져와 화면을 구성하지만 *양방향의 경우 모델의값이 변경되면 화면, 데이터 모두 변경된다. 단방향인 경우 처음 셋팅할때만 값을 반영해주고 이후는 반영해주지 않는다. *

enabled를 false로 하면, 입력할 수 없게 입력필드를 닫겠다는 말이고, view.xml에서 enabled값이 false면 selected값도 false가 되서 모델의값도 false로 바꿔버린다. 그래서 체크해제하면 입력필드도 false로 변경되어 막힌다.

oModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay)
이렇게 단방향으로 사용하면, 체크박스를 해제해도 입력필드가 열려있다.

여기서 this는 자기자신인 controller를 가리킨다. 이 getView는 스탠다드 컨트롤러 상속해서 사용하는데 스탠다드 컨트롤러에 getView라는 함수가 있어 상속해서 사용할 수 있는것이다.
컨트롤러에 연결되어 있는 뷰의 객체를 리턴하고, 모델을 뷰에 담아서 뷰를 셋팅한다. 뷰객체에 setModel이 담겨있다. setModel을 해주지 않으면 데이터를 불러와 사용할수가 없다.

firstChange : function () { var oModel = this.getView().getModel(); }

직전에서 바인딩된 모델(jsonModel)을 가져와서 변수에 담는다. 화면 입력필드에서 값을 변경하면 변경한 값이 현재 변수에 들어가게되고, 이때 모델의 데이터도 같이 변경된다. 모델의 데이터를 변경해도 화면 입력필드의 데이터도 같이 변경된다. *어느 한쪽이라도 데이터변경하면 다른쪽의 데이터도 같이 바뀌는게 양방향의 특징이다. *

getModel()의 괄호안에 아무것도 넣지않으면 default모델이 들어간다.