📌 개요

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

🔗 참고

• SAPUI5 SDK Aggregation binding
• SAPUI5 Currency Class