1. 背景
Aggregation Binding 是 SAPUI5 中的一种数据绑定方式，用于将数据模型中的集合（如数组）绑定到 UI 控件的聚合（如列表项、表格行等）。
常见的场景包括将一个数组绑定到 sap.m.List 的 items 聚合，或者将一个数组绑定到 sap.ui.table.Table 的 rows 聚合。
2. 练习
2.1 创建本地的JSON文件
在前序练习的基础上，让我们在webapp文件夹下，建立一个新的Invoices.json文件，用于存储数组数据。
改动后的项目文件结构如下：
JSON文件的内容如下：
{
"Invoices": [
{
"ProductName": "Pineapple",
"Quantity": 21,
"ExtendedPrice": 87.2,
"ShipperName": "Fun Inc.",
"ShippedDate": "2015-04-01T00:00:00",
"Status": "A"
},
{
"ProductName": "Milk",
"Quantity": 4,
"ExtendedPrice": 10,
"ShipperName": "ACME",
"ShippedDate": "2015-02-18T00:00:00",
"Status": "B"
},
{
"ProductName": "Canned Beans",
"Quantity": 3,
"ExtendedPrice": 6.85,
"ShipperName": "ACME",
"ShippedDate": "2015-03-02T00:00:00",
"Status": "B"
},
{
"ProductName": "Salad",
"Quantity": 2,
"ExtendedPrice": 8.8,
"ShipperName": "ACME",
"ShippedDate": "2015-04-12T00:00:00",
"Status": "C"
},
{
"ProductName": "Bread",
"Quantity": 1,
"ExtendedPrice": 2.71,
"ShipperName": "Fun Inc.",
"ShippedDate": "2015-01-27T00:00:00",
"Status": "A"
}
]
}
Invoices.json文件中包含了5张json格式的发票，我们将使用此JSON文件中的数据数据，绑定控件sap.m.List。
JSON是一种非常轻量级的存储数据的格式，可以直接用作SAPUI5应用程序的数据源。
2.2 创建JSON模型
接下来，让我们在manifest.json中的sap.ui5部分添加此发票模型。
因为我们想要一个 JSONModel，所以我们将type设置为 sap.ui.model.json.JSONModel。
uri是相对于组件的数据路径 (相对路径)。
通过这些配置，SAPUI5组件会自动从Invoices.json文件中加载发票数据，并实例出化一个名字为invoice的 JSONModel。
实例化的 JSONModel会被绑定在组件上，因而这个模型在应用程序中是全局可见的。
改动后的manifest.json文件内容如下：
{
"_version": "1.58.0",
"sap.app": {
"id": "zsapui5.test",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"type": "application",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"dependencies": {
"minUI5Version": "1.108.0",
"libs": {
"sap.ui.core": {},
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "zsapui5.test.i18n.i18n",
"supportedLocales": [
""
],
"fallbackLocale": ""
}
},
"invoice": {
"type": "sap.ui.model.json.JSONModel",
"uri": "Invoices.json"
}
},
"rootView": {
"viewName": "zsapui5.test.view.App",
"type": "XML",
"id": "app"
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
}
}
}
2.3 创建新的视图文件
接下来，在视图文件夹下，创建一个新的视图文件InvoiceList.view.xml来显示发票信息。
变动后的项目结构如下：
InvoiceList.view.xml视图文件的内容如下：
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<List
headerText="{i18n>invoiceListTitle}"
class="sapUiResponsiveMargin"
width="auto"
items="{invoice>/Invoices}" >
<items>
<ObjectListItem
title="{invoice>Quantity} x {invoice>ProductName}"/>
</items>
</List>
</mvc:View>
InvoiceList.view.xml视图中，将显示一个带有自定义标题的列表控件sap.m.List。
sap.m.List控件的items聚合绑定到JSON数据的根路径Invoices，即items="{invoice>/Invoices}"。
因为我们定义的是一个命名模型（named model），我们必须在每个绑定定义前加上标识符invoice，用于指定此命名模型。
在<items>聚合中，我们为列表定义了模板，该模板将对测试数据中的每个发票自动重复。更准确地说，我们其实是使用了sap.m.ObjectListItem为<items>聚合的每个聚合子项创建控件。
列表项的title属性绑定到单个发票的属性。这是通过定义一个相对路径(开头没有/)来实现的。这是可行的，因为我们通过items={invoice>/Invoices}将<items>聚合绑定到发票上。
2.4 显示新的视图文件
然后，让我们在应用视图中，添加刚刚创建的InvoiceList.view.xml视图，这样，就可以将发票信息显示在HelloPanel下方的位置。
改动后的App.view.xml文件内容如下：
<mvc:View
controllerName="zsapui5.test.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
>
<!--在视图中想要使用的库的命名空间列表-->
<Shell>
<App class="myAppDemoWT">
<pages>
<Page title="{i18n>homePageTitle}">
<content>
<mvc:XMLView viewName="zsapui5.test.view.HelloPanel" />
<mvc:XMLView viewName="zsapui5.test.view.InvoiceList" />
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
2.5 维护i18n
最后，在i18n文件中，为新增的文本添加键值对。
改动后的i18n文件内容如下：
# App Descriptor
appTitle=Hello World
appDescription=A simple app that explains the most important concepts of SAPUI5
# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=homePageTitle
helloPanelTitle=PanelTitle
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok
# Invoice List
invoiceListTitle=Invoices
2.6 运行程序
运行应用程序，我们可以看到新增加的控件 sap.m.List ，并可以看到显示出来的发票信息。
通过ctrl + shift + alt + s打开诊断辅助工具，我们可以看到新增加的列表控件，并可以看到每一行对应生成的item控件。
3. 小结
本文总结了SAPUI5中聚合绑定的概念，并通过一个具体的示例展示了其用法。
