实现聚合绑定

学习目标

实现聚合绑定

绑定类型

在上一课中，你在 JSON 模型的上下文中了解了 property binding（属性绑定）这一绑定类型。

除属性绑定外，SAPUI5 中还有另外两种绑定类型：聚合绑定和元素绑定。

观看视频，了解这三种绑定类型。

视频：本节含 SAP 官方视频（视频 ID 1_vpouv0ub），需在 learning.sap.com 在线观看。

控件的聚合只能绑定到模型中定义的列表，即 JSON 模型中的数组或 OData 模型中的实体集。

使用模板控件进行聚合绑定

如前所述，要绑定聚合，你需要创建一个模板或提供一个工厂函数。

JSON 数据与其在表格 UI 中显示的对比，展示了客户名称、街道和城市。

本节展示如何在 XML 视图中使用模板控件。在此处所示的示例中，数组中的条目将通过 sap.m.Table UI 元素显示（请参见图 Model Data）。

示意图展示了使用模板控件将 JSON 模型数据映射到表格结构，演示了如何将姓名、街道和城市等客户详细信息从 JSON 绑定到表格列。

columns 聚合用于定义表格的三列及其表头（请参见图 Data Binding）。此时尚未对此使用数据绑定。

为显示数据，将绑定应用到 sap.m.Table UI 元素的 items 聚合。items 聚合定义了表格中显示的条目。

<Table> 标签的 items="{/Customers}" 属性用于将 JSON 模型中 Customers 数组的元素传递给表格的 items 聚合。为此需要使用绝对绑定路径 /Customers。

聚合绑定要求定义一个模板，该模板会为所传递数组的每个元素进行克隆。对于创建的每个克隆，绑定上下文都会被设置为相应的数组元素，因此模板的所有绑定都相对于该数组元素解析。

该模板可以在图 Data Binding 中嵌套的 items 元素中找到。它是一个 sap.m.ColumnListItem 控件，用于为表格创建新行。该行显示来自相应数组元素的客户名称、街道以及城市。

注意

在 sap.m.ColumnListItem 控件中使用的绑定路径都是相对路径，因为它们相对于为其克隆模板的数组元素进行解析。

使用聚合绑定

业务场景

在本练习中，你将向 Overview 视图添加一个表格以显示现有客户。为此，你使用项目中准备好的、以 JSON 格式包含客户数据的文件。你通过 JSON 模型使该数据可供应用使用，并通过 Table UI 元素以聚合绑定的方式显示它。*模板：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：*sol/11_JSON_model模型解决方案：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：sol/12_aggregation_binding

任务 1：将带有准备好的客户数据的自动实例化 JSON 模型添加到组件

步骤

打开 *webapp/model* 文件夹中准备好的 *data.json* 文件，并熟悉其中包含的客户数据的结构。客户信息包含在一个名为 Customers 的数组中，其中每个客户对象具有以下特性：CustomerNumber、Form、CustomerName、Street、PostCode、City、Country、Email、Telephone 和 Discount。此外，每个客户都有一个名为 _Bookings 的数组，其中包含相应客户的航班预订。
现在在编辑器中打开 *webapp* 文件夹中的 *manifest.json* 应用描述符。
将以下属性添加到 sap.ui5 命名空间的 models 属性中，以通过一个自动实例化的、未命名的 JSON 模型使上面了解的客户数据可供组件使用：

"": {
"type": "sap.ui.model.json.JSONModel",
"uri": "model/data.json"
}

结果

应用描述符的 models 部分现在应如下所示：

manifest.json 文件的 models 部分。

任务 2：将带有来自 JSON 模型的客户数据的表格添加到 Overview 视图

步骤

在编辑器中打开 *webapp/view* 文件夹中的 *Overview.view.xml* 文件。
将以下表格定义直接添加到 </Panel> 标签之后，以显示来自 JSON 模型的客户数据：

<Table headerText="Customers" growing="true" growingThreshold="5"
class="sapUiResponsiveMargin" width="auto" items="{/Customers}">
<columns>
<Column><header><Text text="Customer Name"/></header></Column>
<Column><header><Text text="Street"/></header></Column>
<Column><header><Text text="Post Code"/></header></Column>
<Column><header><Text text="City"/></header></Column>
<Column><header><Text text="Country"/></header></Column>
<Column><header><Text text="Email"/></header></Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{CustomerName}"/>
<Text text="{Street}"/>
<Text text="{PostCode}"/>
<Text text="{City}"/>
<Text text="{Country}"/>
<Text text="{Email}"/>
</cells>
</ColumnListItem>
</items>
</Table>

注意

属性 growing="true"是 Table UI 元素上的属性，它启用表格的 growing 功能，以便通过向模型请求来加载更多项。每次 grow 从模型请求的项数由 growingThreshold 属性定义。- 模型数据中也包含的预订数据将在下一个练习中通过另一个表格显示。- 在后面的练习中，这里使用的 JSON 模型将被 OData 模型替换，以通过 OData 服务在 UI 上显示来自后端系统的客户数据。

结果

Overview 视图现在应如下所示： Overview.view.xml 文件，突出显示了 Table 标签。 3. 通过从 SAP Business Application Studio 启动应用来进行测试运行。确保客户数据显示在 Overview 视图的表格中。

右键单击你的 sapui5-development-learning-journey 项目中的任意子文件夹，然后从出现的上下文菜单中选择 Preview Application。
在出现的对话框中选择名为 start-noflp 的 npm 脚本。
在已打开的应用程序中，检查组件是否按预期工作。