UI5 모델바인딩

모델 바인딩에는 단방향 / 양방향 바인딩이 있습니다. 

 

단방향(one-way)
처음모델의 값을 뷰에 보여주는 수직적인 구조입니다.

 

양방향(two-way)
뷰에 바인딩한 모델이 실시간으로 뷰의 값이 바뀔경우 모델에 즉시

반영되는 수평적인 구조입니다.

 

두 바인딩을 코드실습으로 알아봅시다 ^^

 

Step1.프로젝트 생성

먼저  ZBindingTEST 라는 프로젝트를 생성합니다.

(프로젝트 만들기 참조)

Project Name : ZBindingTEST

 

View Type : XML

View Name : BindingTest

 

Step2.Controller 작성

Controller 아래 경로의 BindingText.controller.js를 선택하여

_oBindingModel: new sap.ui.model.json.JSONModel(), //바인딩모델

을 입력합니다.

바인딩을 할 모델을 생성하는 작업입니다.

 

UI5 생명주기 중 화면실행시 최초실행되는 onInit function을 생성하고

oData 변수에 Json형태의 Name : “홍길동”을 추가 합니다.

( UI5 생명주기와 , JSON데이터구조는 다음에 자세히 다루도록 합니다.)

 

oBindingModel에 데이터를 셋팅

this._oBindingModel 을 불러와

.setData() : 모델에데이터삽입

에 oData를 넣어줍니다.

this._oBindingModel.setData(oData); 을 입력합니다.

 /**

   * 최초실행

   */

   onInit: function() {

       var oData = {

            Name : "홍길동"

        };

       this._oBindingModel.setData(oData);       

   }

 

oBindingModel을 View에 바인딩.

this.getView() 로 View 를 가져와 .setModel() 메서드로 바인딩 합니다.

바인딩 대상 모델은 this._oBindingModel 을 바인딩합니다.

this.getView().setModel(this._oBindingModel); 을 입력합니다.

       /**

         * 최초실행

         */

        onInit: function() {

            var oData = {

                Name : "홍길동"

            };

            this._oBindingModel.setData(oData);  

            this.getView().setModel(this._oBindingModel);     

       }

Step3.Xml뷰 작성

View 아래 경로의 BindingTest.view.xml 를 선택

<Content></Conternt> 사이에

 <Panel>

       <Text text="{/Name}" /> <!--단방향-->

       <Input type="Text" value="{/Name}" />

       <!--양방향-->

</Panel>

코드를 입력합니다.

각각 단방향  text 에  {/Name}을

양방향 input value 에  {/Name}을 입력하면

단방향/양방향 바인딩 구성이 완료됩니다. 

 

Step4.프로젝트 실행

자 이제 실행해 보겠습니다.

프로젝트 우클릭 > Run > Run as > Web Application 으로 실행합니다.

 

oBindingModel 의 Name 필드의 “홍길동“ 이 표시 되어집니다.

 

이제 아래의 input필드에  GOOD 라는 단어를 쓰고 엔터를 쳐봅시다.

위와같이 단방향 바인딩된 Text 도 함께 바뀌게 됩니다. 

양방향 바인딩으로  oBindingModel 의 Name 도 “홍길동 GOOD” 로 실시간으로 바뀌게 됩니다.

UI5는 대부분의 Json데이터를  바인딩 기반으로  View와  Controller간 데이터를 주고받습니다.