实现元素绑定

学习目标

实现元素绑定

元素绑定

将要讨论的三种绑定类型中的最后一种是元素绑定。

元素绑定尤其在列表-明细场景中发挥作用。因此，这里将讨论一个相应的示例。

图像显示一个 UI 表，其中展示带有航空公司详细信息的客户预订，并链接到包含客户姓名、城市、航空公司 ID、航班日期和预订编号的 JSON 模型数据。

在上一课关于聚合绑定的内容中，名为 Customers 的数组的元素通过 Table UI 元素显示在视图上。对于元素绑定，JSON 模型数据得到了扩展：Customers 数组中的每个客户都会获得一个附加属性 _Bookings。该属性是一个数组，包含属于该客户的预订（参见图 Example Scenario）。

通过 UI 上的第二个表，将显示属于某个客户的预订，也就是说，一旦用户在客户表中选择某个条目，相应的预订就应出现在预订表中。此行为通过元素绑定实现。

图示显示两个数据绑定表，Customer Table 和 Booking Table，以及一个事件处理函数 onCustomerChange，将客户选择与更新预订详细信息关联起来。

预订表的 items 聚合通过 items="{_Bookings}" 属性绑定到 _Bookings 属性（参见图 Providing the Binding Context）。由于该绑定使用的是相对路径，预订表尚无法显示任何数据，因为缺少此相对路径的绑定上下文。

缺失的绑定上下文由 onCustomerChange 事件处理程序提供。此事件处理程序注册在客户表的 selectionChange 事件上，也就是说，每当用户在客户表中选择新客户时，就会调用该事件处理程序。他们可以通过显示在客户表左侧的单选按钮来完成此操作（mode="SingleSelectLeft"）。

在事件处理程序实现中，会从 oEvent 事件对象中查询 listItem 事件参数。该参数提供用户所选客户的列列表项。对于这个属于所选客户的列表项，会通过 getBindingContext 方法检索关联的绑定上下文。

所请求的绑定上下文会被设置到预订表上，该表在事件处理程序中通过其 Id 访问。因此，相对路径 _Bookings 现在可以解析为绝对路径（/Customers/0/_Bookings 或 /Customers/1/_Bookings），并且属于所选客户的预订会显示在该表中。

使用元素绑定

业务场景

在上一个练习中，你创建了一个 JSON 模型，并使用概览视图上的表显示了其中的客户数据。在本练习中，你将在概览视图上创建另一个表，用于显示客户的航班预订。所需预订数据已通过上一个练习中创建的 JSON 模型在应用程序中可用，因为每个客户对象都有一个名为 _Bookings 的数组，其中包含相应的航班预订。当用户在客户表中选择某个客户时，预订表应显示关联的航班预订。你将使用元素绑定来实现此行为。*模板：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：*sol/12_aggregation_binding模型解决方案：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：sol/13_element_binding

任务 1：向概览视图添加一个用于显示 JSON 模型中预订数据的表

步骤

在编辑器中打开 *webapp/view* 文件夹中的 *Overview.view.xml* 文件。
在客户表的 </Table> 标签之后立即插入以下表定义，以显示属于某个客户的预订数据：

<Table id="bookingTable" headerText="Bookings" items="{_Bookings}"
growing="true" growingThreshold="5" class="sapUiResponsiveMargin" width="auto">
<columns>
<Column><header><Text text="Airline ID"/></header></Column>
<Column><header><Text text="Connection Number"/></header></Column>
<Column><header><Text text="Flight Date"/></header></Column>
<Column><header><Text text="Class"/></header></Column>
<Column><header><Text text="Foreign Currency Payment"/></header></Column>
<Column><header><Text text="Cancellation Status"/></header></Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{AirlineID}"/>
<ObjectIdentifier title="{ConnectionNumber}"/>
<ObjectIdentifier title="{FlightDate}"/>
<Text text="{Class}"/>
<ObjectNumber number="{ForeignCurrencyPayment}"
unit="{ForeignCurrency}"/>
<Text text="{IsCancelled}"/>
</cells>
</ColumnListItem>
</items>
</Table>

注意

预订表通过其 items 聚合绑定到客户的 _Bookings 属性。请注意，为此必须使用相对绑定路径。

所使用的 bookingTable Id 稍后将在视图控制器中用于在 JavaScript 中访问该表。

你可以在 webapp/model 文件夹的 data.json 文件中查找用于绑定表列的模型属性名称。

结果

概览视图现在应如下所示：

Overview.view.xml 文件，突出显示了 Table 标签。

任务 2：在客户表的 `selectionChange` 事件上注册事件处理程序

步骤

确保 *Overview.view.xml* 文件已在编辑器中打开。
将属性 mode="SingleSelectLeft" 和 selectionChange=".onCustomerChange" 添加到客户表的 <Table> 标签。

注意

通过 mode="SingleSelectLeft" 你可以实现：表中只能通过左侧定位的选择器选择一个客户。

通过 selectionChange=".onCustomerChange" 你为“用户在表中更改所选客户”这一事件注册一个方法——该方法仍需实现。

结果

客户表的实现现在应如下所示：

Overview.view.xml 文件，突出显示了 mode 属性。

任务 3：在概览视图控制器中实现所注册的事件处理程序

步骤

在编辑器中打开 *webapp/controller* 文件夹中的 *Overview.controller.js* 文件。
将上面为客户表的 selectionChange 事件注册的 onCustomerChange 事件处理程序方法添加到视图控制器。按如下方式实现此方法，以设置预订表的绑定上下文：

onCustomerChange: function (oEvent) {
var oBindingContext = oEvent.getParameter("listItem").getBindingContext();
this.byId("bookingTable").setBindingContext(oBindingContext);
}

结果

视图控制器现在应如下所示： Overview.controller.js 文件，突出显示了 onCustomerChange 函数。 3. 通过从 SAP Business Application Studio 启动应用程序来进行测试运行。确保当选择某个客户时，关联的航班预订会显示在预订表中。

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