📌 개요
이제 우리는 새로 생성된 목록을 가지고 뭔가를 하고 싶다. 대부분의 경우 목록을 사용하여 항목 선택을 허용한 다음 해당 항목의 상세 내역을 다른 곳에 표시한다. 이를 위해 상대적으로 바인딩된 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의 개념을 익히기 바란다.
🔗 참조
coding everywhere