확인란을 선택 취소하면 입력 필드가 열립니다.
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();
}
}); 데이터는 보기에 직접 바인딩될 수 없습니다.
그래서 모델에 데이터를 넣고 모델을 뷰에 바인딩합니다.
모델 설정 보기
- JavaScript 개체 만들기(배열)
- json 모델 생성(1단계에서 생성한 객체를 인자로 받음)
- 뷰에서 모델 설정(모델 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()의 괄호 안에 아무것도 없으면 기본 모델이 입력됩니다.