데이터 바인딩
SAPUI5는 데이터 바인딩을 사용하여 다른 두개의 데이터 소스의 동기화를 유지한다. 이렇게 한 소스의 모든 변경 사항은 다른 소스에도 반영된다.
데이터 바인딩을 위해 Model 및 Binding instance가 필요하다. 모델은 데이터를 설정하거나 서버에서 데이터를 검색하는 방법을 제공하며, 데이터에 대한 바인딩을 생성하는 방법을 제공한다. 이 메서드가 호출되면 바인딩된 데이터가 변경될 때마다 실행할 이벤트를 제공하는 바인딩 인스턴스가 생성된다. 화면의 요소는 이 이벤트를 수신하고 새 데이터에 따라 화면을 업데이트할 수 있다.
UI상에서 조작으로 인해 기본 애플리케이션 데이터(예: 사용자가 입력한 데이터)가 업데이트되는 경우에도 데이터 바인딩이 사용된다. 이를 양방향 바인딩이라고 한다.
The Table control relies completely on data binding , and its supported feature set is tightly coupled to the data model and binding used.
getBinding() 함수 역할
-
Get the binding object for a specific aggregation/property
-
Returns: sap.ui.model.Binding (Extends: sap.ui.base.EventProvider)
바인딩은 binding path, binding context와 같은 data binding에 대한 필요한 정보들을 가지고 있는 object이다. 그리고 데이터 조작을 위해 모델에 대한 인터페이스 역할을 한다. Binding클래스는 Event provider 추상클래스를 상속받기 때문에, 데이터 모델에 대한 변화를 알고 property들과 list등의 getter를 제공한다.
Escape문자의 중요성
numberState="{= ${products>UnitPrice} > ${/priceThreshold} ? 'Error' : 'Success' }">
numberState="{= ${products>UnitPrice} <= ${/priceThreshold} ? 'Success' : 'Error' }">
위 코드 두 줄 중 하나는 에러가 난다.
이 문제는 다음 두 가지 방법 중 하나를 통해 방지할 수 있다.
-
조건의 논리를 반대로 한다('작음' 대신 '보다 크거나 같음' 사용).
-
'<' 문자에 escape문자를 사용한다.
EX)
numberState="{= ${products>UnitPrice} <= ${/priceThreshold} ? 'Success' : 'Error' }">- 이스케이프 문자를 사용하는 것은 읽기 쉽지 않기 때문에, 선호되는 접근법은 조건의 논리를 뒤집고 대신 > 문자를 사용하는 것이다.
- cf) 앰퍼샌드(&) 문자는 XML 파서에 높은 우선 순위 의미를 갖으며, 이 문자는 항상 "escape 문자의 시작"을 의미하는 것으로 해석된다. 따라서 조건에서 Boolean AND 연산자(&&)를 사용하려면 (&&) 다음과 같이 써야한다.
cf) EXPRESSION BINDING
EXPRESSION BINDING이란 것을 알리기 위해 {= } 형태로 사용.
여기서 $기호는 '{' 문자의 ESCAPE를 위해 붙임.{=expression}
이 expression은 단방향 바인딩을 사용하며, 이렇게 하면 모델 값이 변경될 경우 자동으로 다시 계산되어 표현된다.
{:=expression}
이 expression은 일회성 바인딩을 사용하여 값은 한 번만 계산된다. 따라서 모델에 대한 변경 listener들을 유지할 필요가 없기 때문에 더 적은 리소스가 소요된다.
필터, 소터
필터는 xml과 controller둘다에 넣을 수 있다.
필터는 생성자에 filters 배열객체 또는 필터 객체 하나를 필요로 한다.
oFilter = new Filter({
path: "score",
operator: FilterOperator.LE,
value1: iEnd,
});소터는 생성자에 파라미터들을 바탕으로 생성한다.
var oSorter = new Sorter("name", bDesc);필터는 다음과 같이 적용한다.
var oTable = this.getView().byId("table")
var oTableBinding = oTable.getBinding("items");
var aFilter = [];
// aFilter에 필요한 필터 추가
oTableBinding.filter(aFilter);컨트롤러 property
Controller.js코드에 정의되어 있지 않은 property를 this.property같이 조회할 시 nullPointer 오류 대신 undefined로 읽어온다.
