(연습) 바인딩(양방향 및 단방향)

by

확인란을 선택 취소하면 입력 필드가 열립니다.

application-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>

중괄호 바인딩 {}사용
재산을 취득하다 /프로포티~을 위한
기능을 실행할 때, .붙여서 사용

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. JavaScript 개체 만들기(배열)
  2. json 모델 생성(1단계에서 생성한 객체를 인자로 받음)
  3. 뷰에서 모델 설정(모델 2를 파라미터로 받음) 기본 모델 설정 시 파라미터만 사용(json model) 파라미터가 2개 이상일 경우 입력(json model, “모델명”)

모델을 통해 데이터를 가져오고 화면을 빌드하지만 *양방향의 경우 모델의 값이 변경되면 화면과 데이터가 모두 변경됩니다.

단방향의 경우 처음 설정할 때만 값이 반영되고 그 이후에는 반영되지 않습니다.

*

enabled가 false로 설정되면 입력 필드가 닫혀 입력이 이루어지지 않음을 의미합니다.

따라서 체크를 해제하면 입력란도 false로 변경되어 차단됩니다.

oModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay)
이와 같이 한 방향으로 사용하면 체크박스를 선택하지 않아도 입력 필드가 열린 상태로 유지됩니다.

여기 this컨트롤러 자체를 가리킵니다.

이것 getView표준컨트롤러에서 상속받아 사용하는데, 표준컨트롤러에서 getView라는 함수를 상속받아 사용할 수 있는 기능이 있습니다.


컨트롤러의 뷰에 연결된 객체를 반환하고 모델을 뷰에 넣고 뷰를 설정합니다.

SetModel은 뷰 객체에 포함되어 있습니다.

setModel이 설정되지 않은 경우 데이터를 호출하여 사용할 수 없습니다.

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

이전 바인딩에서 모델(jsonModel)을 가져와 변수에 넣습니다.

화면 입력란에서 값을 변경하면 변경된 값이 현재 변수에 입력되고 이때 모델 데이터가 변경됩니다.

모델의 데이터가 변경되더라도 화면 입력 필드의 데이터도 변경됩니다.

*양방향 특성은 데이터 중 하나가 변경되면 다른 데이터도 변경된다는 것입니다.

*

getModel()의 괄호 안에 아무것도 없으면 기본 모델이 입력됩니다.

Related Posts: