实现和使用格式化程序函数

学习目标

• 实现和使用格式化程序函数，将模型数据转换为外部格式

创建格式化程序函数

SAPUI5 提供两种不同的选项来将模型数据转换为用于可视呈现的外部格式：数据类型和格式化程序函数。

数据类型提供了格式化、解析和校验数据的能力，而格式化程序函数只允许单向转换。

格式化程序函数有一个参数，即需要格式化为外部表示形式的值。

格式化程序函数不仅可以用于格式化值，还可以用于执行类型转换或根据给定值计算结果。

注意

使用格式化程序函数时，绑定会自动切换为 "one-way"。因此，你不能将格式化程序函数用于 "two-way" 场景。

格式化程序函数可以定义在单独的模块中，也可以局部定义在视图控制器中。

注意

建议使用单独的模块文件，将各格式化程序归组在一起，并使它们在应用程序中全局可用。

图中 Defining a Formatter Function 的编码示例展示了名为 classText 的格式化程序函数的定义。它创建在 formatter.js 文件中实现的单独模块中。classText 格式化程序将模型数据中使用的键转换为用户可理解的文本。例如，对于键值 "Y"，返回文本 "Economy Class"。

使用格式化程序函数

图中 Using a Formatter Function 展示了如何在 XML 视图中使用定义在单独模块中的格式化程序函数。

为此，必须首先确保包含该格式化程序函数的模块已加载。这通过在 <mvc:View> 标签中按模块名称要求加载格式化程序模块来实现，如图所示。

加载的模块被分配给别名 formatter。该别名的名称是任意的，关键在于该别名可以在绑定中用作变量。

要在绑定中指定格式化程序函数，需使用复杂绑定语法。要格式化的模型属性通过 path 属性指定，格式化程序函数则通过以下语法分配给 formatter 属性：

<alias of the formatter module>.<name of the formatter function>.

因此，在示例中，Class 模型属性的内容被传递给 classText 格式化程序函数。该格式化程序函数返回的字符串随后通过 Text 控件显示在 UI 上。

注意

除了自定义格式化程序函数外，你还可以为标准用例使用预定义的格式化程序函数，例如 sap/base/strings/formatMessage。

实现格式化程序函数

业务场景

在预订表中，所预订的航班舱位目前分别使用值 C、Y 和 F 显示。在本练习中，你将实现一个格式化程序函数，将这些来自 Class 模型属性的技术值转换为对用户有意义的文本。对于 C，应设置文本 Business Class；对于 Y，应设置文本 Economy Class；对于 F，应设置文本 First Class。然后，你将把实现好的格式化程序函数集成到相应表列的数据绑定中，以便对航班舱位进行相应的格式化。*模板：*Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: **sol/14_data_types***参考答案：*Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: sol/15_formatters

任务 1：创建格式化程序函数

步骤

1. 在 *webapp* 文件夹的子文件夹 *model* 中创建一个名为 *formatter.js* 的新文件。

2. 在项目结构中打开 *webapp/model* 文件夹的上下文菜单。

3. 选择 New File。

4. 在出现的字段中，键入 formatter.js 并按 Enter。

结果

已创建 formatter.js 文件并显示在编辑器中。 2. 将以下代码添加到 *formatter.js* 文件，以创建一个名为 classText 的格式化程序函数，将来自模型的传入值转换为有意义的文本。

sap.ui.define([], function () {
"use strict";
return {
classText: function (sClass) {
switch (sClass) {
case "C":
return "Business Class";
case "Y":
return "Economy Class";
case "F":
return "First Class";
default:
return sClass;
}
}
};
});

结果

格式化程序函数的实现应如下所示：

任务 2：使用格式化程序函数显示航班舱位

步骤

1. 在编辑器中打开 *webapp/view* 文件夹中的 *Overview.view.xml* 文件。

2. 将以下属性添加到 <mvc:View> 标签：

core:require="{formatter: 'sap/training/exc/model/formatter'}"

注意

该附加属性确保加载包含 classText 格式化程序函数的模块，并将其分配给 formatter 别名。

结果

mvc:View 标签现在应类似于以下内容： 3. 按如下方式调整预订表中航班舱位列（模型属性 Class）的数据绑定，以通过格式化程序函数将 Class 模型属性的内容传递为外部表示形式：

Old	New
<Text text="{Class}"/>	<Text text="{ path: 'Class', formatter: 'formatter.classText' }"/>

结果

预订表中航班舱位列的数据绑定现在应如下所示： 4. 通过从 SAP Business Application Studio 启动应用程序来进行测试运行。 确保预订表的航班舱位列中不再显示来自数据模型的技术值（C、Y 或 F），而是显示来自格式化程序函数的有意义文本。

1. 右键单击你的 sapui5-development-learning-journey 项目中的任意子文件夹，然后在出现的上下文菜单中选择 Preview Application。

2. 在出现的对话框中选择名为 start-noflp 的 npm 脚本。

3. 在打开的应用程序中，检查组件是否按预期工作。