通过本教程前面的步骤SAP UI5 初学者教程之十七 - 聚合绑定在 UI5 复合控件中的使用的介绍,我们已经学会了如何在 SAP UI5 里显示列表,如下图所示:
本步骤我们给该列表添加更多的业务数据,比如每张发票的金额。
按照本文的步骤完成的 SAP UI5 应用,列表如下图所示:
可以看到,同前一个步骤相比,现在 Invoices 表格里,每张发票的金额和货币单位已经显示出来了。
为了实现这个效果,本步骤的源代码位于我的 Github 这个文件夹下面:
https://github.com/wangzixi-diablo/ui5-tutorial/tree/main/19
下面是具体的实现步骤说明。
本教程步骤14:SAP UI5 初学者教程之十四 - 嵌入视图的使用方式,我们已经学习了如何在一个 XML 视图里插入另一个 XML 视图。
我们观察到的 Invoices 列表,也是实现在一个单独的 XML 视图文件 InvoiceList.view.xml, 并嵌入 App.view.xml 文件内部。
因此,本步骤关于发票金额和货币单位的显示功能增添,需要在 InvoiceList.view.xml 文件内修改。
我们给 ObjectListItem 标签增添了两个新的属性:
- number
- numberUnit
分别对应发票的金额和货币单位。
number 属性的绑定信息有两部分(parts):
(1) 模型名称为 invoice, 模型字段名为 ExtendedPrice, 二者通过符号">" 连接,即下图 14 行代码 parts 数组中的第一个元素。这是我们之前已经学习过的 SAP UI5 数据绑定的语法。如果有所遗忘,请参考 Jerry 这篇文章进行复习:SAP UI5 初学者教程之十八 - SAP UI5 数据绑定语法里的特殊符号,以及绝对绑定和相对绑定概念详解
(2) 模型名称为 view,模型字段名为 currency,即上图 parts 数组的第二个元素。
这个 view 名称定义在 Invoice 视图对应的控制器的第 13 行代码里,currency 字段定义在下图第 11 行代码,单位硬编码为 EUR.
同 Invoices 模型一样,这个 view 模型类型为 JSON 模型,通过第13 行的 setModel 方法,绑定到 Invoice XML 视图。
总之,number 这一个单一的字段,其金额和货币单位分别来自应用两个不同模型的不同字段,这就是本文标题复杂数据绑定的由来。
代码第 15 行为 number 字段分配了 SAP UI5 预定义的数据类型:sap.ui.model.type.Currency:
第 16 行的 formatOptions,则是该数据类型预定义的配置选项。比如 preserveDecimals 设置为 false,这个字段的含义,用以下例子来说明。
以发票列表里第二个元素为例,显示的值为 10.00.
在 Invoices.json 数据文件里,这张发票的原始金额为 9.99999:
preserveDecimals 为 false,意思是按照欧元默认的设置,小数点后只取2位,多余的数位采取四舍五入的处理方式。
如果我们将 preserveDecimals 设置为 true,意思是不采取四舍五入,小数点后有多少位,就显示多少位。效果如下:
更多Jerry的原创文章,尽在:"汪子熙":