Data Binding Tutorial - 13 Element Binding
📌 개요
이제 우리는 새로 생성된 목록을 가지고 뭔가를 하고 싶다. 대부분의 경우 목록을 사용하여 항목 선택을 허용한 다음 해당 항목의 상세 내역을 다른 곳에 표시한다. 이를 위해 상대적으로 바인딩된 control이 있는 형태를 사용하고 element binding을 통해 선택한 엔티티에 바인딩한다.
📌 예제
- view.xml
<Panel headerText="{i18n>panel3HeaderText}" class="sapUiResponsiveMargin" width="auto">
<List headerText="{i18n>productListTitle}" items="{products>/Products}">
<items>
<ObjectListItem
press=".onItemSelected"
type="Active"
...
/>
<Panel id="productDetailsPanel" headerText="{i18n>panel4HeaderText}" class="sapUiResponsiveMargin" width="auto">
<form:SimpleForm editable="true" layout="ColumnLayout">
<Label text="{i18n>ProductID}"/>
<Input value="{products>ProductID}"/>
<Label text="{i18n>ProductName}"/>
<Input value="{products>ProductName}"/>
<Label text="{i18n>QuantityPerUnit}"/>
<Input value="{products>QuantityPerUnit}"/>
<Label text="{i18n>UnitPrice}"/>
<Input value="{products>UnitPrice}"/>
<Label text="{i18n>UnitsInStock}"/>
<Input value="{products>UnitsInStock}"/>
<Label text="{i18n>Discontinued}"/>
<CheckBox selected="{products>Discontinued}"/>
</form:SimpleForm>
</Panel>
- controller.js
onItemSelected: function(oEvent) {
const oSelectedItem = oEvent.getSource();
const oContext = oSelectedItem.getBindingContext("products");
console.log(oContext);
const oSelectedItemObj = oContext.getObject();
console.log(oSelectedItemObj);
console.log(oContext.getPath());
const sPath = oContext.getPath();
const oProductDetailPanel = this.byId("productDetailsPanel");
oProductDetailPanel.bindElement({ path: sPath, model: "products" });
}
💡sap.ui.model.Context?
context는 model data 객체에 대한 pointer이다. relative binding은 reference point로 context가 필요하다. context가 없으면 상대 바인딩은 확인 되지 않으며 model data를 가리키지 않는다. Context의getObject
나getPath
등의 메소드를 직접 활용하여 Context의 개념을 익히기 바란다.
🔗 참조
- SAPUI5 SDK Element Binding
- SAPUI5 SDK API sap.ui.model.Context
- SAPUI5 SDK API getBindingContext method
- SAPUI5 SDK API bindingElement method
Author And Source
이 문제에 관하여(Data Binding Tutorial - 13 Element Binding), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hjh0017/Data-Binding-Tutorial-13-Element-Binding저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)