Data Binding Tutorial - 12 Aggregation Binding Using Templates
📌 개요
Aggregation binding(또는 list binding)을 사용하면 control이 model data 내의 list에 binding할 수 있게 하고 child controls에 의해 list 항목에 상대적인 binding을 할 수 있다.
다음 두 가지 접근 방식 중 하나를 사용하여 model에 data를 표시하는 데 필요한 만큼 child control을 자동으로 만든다.
- data를 표시하는 데 필요한 만큼 복제된 template control을 사용한다.
- factory function을 사용하여 runtime에 수신된 데이터를 기반으로 bound list 항목당 올바른 control을 생성한다.
📌 예제
- View.xml
<Panel headerText="{i18n>panel4HeaderText}" class="sapUiResponsiveMargin" width="auto">
<List headerText="{i18n>productListTitle}" items="{products>/Products}">
<items>
<ObjectListItem title="{products>ProductName}" number="{
parts: [
{path: 'products>UnitPrice'},
{path: '/currencyCode'}
],
type: 'sap.ui.model.type.Currency',
formatOptions: { showMeasure: false }
}" numberUnit="{/currencyCode}">
<attributes>
<ObjectAttribute text="{products>QuantityPerUnit}"/>
<ObjectAttribute title="{i18n>stockValue}" text="{
parts: [
{path: 'products>UnitPrice'},
{path: 'products>UnitsInStock'},
{path: '/currencyCode'}
],
formatter: '.formatStockValue'
}"/>
</attributes>
</ObjectListItem>
</items>
</List>
</Panel>
- controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/m/library",
"sap/ui/core/Locale",
"sap/ui/core/LocaleData",
"sap/ui/model/type/Currency"
],
/**
* @param {typeof sap.ui.core.mvc.Controller} Controller
*/
function (Controller, JSONModel, mobileLibrary, Locale, LocaleData, Currency) {
"use strict";
return Controller.extend("databinding.controller.SubView", {
onInit: function () {
const oView = this.getView();
const oProductModel = new JSONModel(this.getOneWayModelData());
oProductModel.loadData("./model/Products.json");
oProductModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
oView.setModel(oProductModel, "products");
oView.setModel(new JSONModel(this.getOneWayModelData()));
},
formatStockValue: function(fUnitPrice, iStockLevel, sCurrCode) {
const sBrowserLocale = sap.ui.getCore().getConfiguration().getLanguage();
const oLocale = new Locale(sBrowserLocale);
const oLocaleData = new LocaleData(oLocale);
const oCurrency = new Currency(oLocaleData.mData.currencyFormat);
return oCurrency.formatValue([fUnitPrice * iStockLevel, sCurrCode], "string");
},
getOneWayModelData: function() {
return {
currencyCode: "EUR"
};
},
});
});
- i18n.properties
# Screen titles
panel4HeaderText=Aggregation Binding
# Product list
productListTitle=Product List
stockValue=Current Stock Value
🔗 참고
Author And Source
이 문제에 관하여(Data Binding Tutorial - 12 Aggregation Binding Using Templates), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hjh0017/Data-Binding-Tutorial-12-Aggregation-Binding-Using-Templates저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)