使用表达式绑定

学习目标

  • 使用表达式绑定来格式化视图上的输出

表达式绑定

表达式绑定是 SAPUI5 绑定语法的增强功能，它允许提供表达式来替代格式化函数（formatter function）。

使用表达式绑定可以省去定义函数的开销，如果格式化函数的实现很简单（例如值的比较），则建议使用表达式绑定。

要使用表达式绑定，需要为应用程序启用复杂绑定语法。

注意

当属性 data-sap-ui-compatVersion="edge"添加到引导脚本时，复杂绑定语法会自动启用。

如下文所述的表达式绑定代码示例。

在 XML 视图中，表达式绑定可通过以下两种方式之一来指定：

  • {= expression} 此变体使用单向绑定。当模型值发生变化时，会进行自动重新计算。

  • {:= expression} 此变体使用一次性绑定，即该值只计算一次。此变体需要的资源更少，因为不必维护对模型的更改监听器。

表达式的语法与 JavaScript 语法类似，但只能使用 JavaScript 表达式语法的一个子集。其中，以下语法元素可用：

  • 严格相等运算符： ===, !==

  • 关系运算符： <, >, <=, >=

  • 条件运算符： ?

  • 二元逻辑运算符： &&, ||

  • 全局符号： 例如，undefined

此外，还可以使用以下语法将模型层中的值嵌入到表达式中：

${binding}

binding 既可以是简单路径，也可以是复杂绑定。

对于具有标准数据类型（例如 String）的嵌入式绑定，可以使用 . 运算符访问成员和成员方法，如下例所示：

${/CustomerName}.length

注意

运算符使用的一些字符需要在 XML 视图中进行转义，例如&&需要使用&&进行转义。

表达式绑定的示例可在图 Using Expression Binding 中找到。

使用表达式绑定

业务场景

在本练习中，您将使用表达式绑定为概览视图上 Create Customer 按钮的 enabled 属性赋值：仅当客户名称的表单字段包含值时，enabled 属性才应具有值 true，即按钮应处于启用状态，否则应处于禁用状态。此外，您还将使用表达式绑定，通过 SAPUI5 图标字体中的图标来格式化预订表中 Cancellation Status 列的内容。*Template:*Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: **sol/16_filtering_and_sorting***Model solution:*Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: sol/17_expression_binding

任务 1：根据客户名称输入字段的值设置 Create Customer 按钮的 enabled 属性

步骤

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

  2. 为客户名称的 Input UI 元素添加属性 valueLiveUpdate="true"。

注意

这会使得 value 属性的值在 Input UI 元素上每次按键后都会更新。否则，该值要等到离开输入字段或按下 Enter 键时才会更新。

结果

客户数据的表单现在应如下所示： Overview.view.xml 文件，突出显示 valueLiveUpdate 属性。 3. 现在为 Create Customer 按钮添加 enabled 属性。按如下方式为其赋值 true 或 false，以确保仅当客户名称的表单字段包含值时该按钮才处于启用状态：

enabled="{= ${customer>/CustomerName} !== undefined && ${customer>/CustomerName}.length > 0 }"

注意

由于您在上文中为客户名称字段添加了 valueLiveUpdate 属性，因此一旦您在空的客户名称字段中输入第一个字符，该按钮就会启用。反之，一旦您删除客户名称字段中的最后一个字符，该按钮就会禁用。

结果

现在 Create Customer 按钮应如下所示： Overview.view.xml 文件，突出显示 enabled 属性。

任务 2：使用 SAPUI5 图标字体中的图标格式化预订表中的取消状态

步骤

  1. 确保 *Overview.view.xml* 文件已在编辑器中打开。

  2. 当前，取消状态是通过 Text UI 元素显示在预订表中的。它显示 IsCancelled 模型属性的内容，如果预订已取消，该属性包含 X。 使用表达式绑定，如果预订已取消，现在应显示 SAPUI5 图标字体中的 sap-icon://cancel 图标。对于未取消的预订，应显示 sap-icon://accept 图标。 为进行此重新格式化，请从 cells 聚合中删除 <Text text="{IsCancelled}"/>，并将其替换为以下 Icon UI 元素。除图标外，还设置了工具提示 cancelled 和 not cancelled。

<core:Icon src="{= ${IsCancelled} === 'X' ? 'sap-icon://cancel' : 'sap-icon://accept' }"
tooltip="{= ${IsCancelled} === 'X' ? 'cancelled' : 'not cancelled' }"/>

注意

可用的图标可通过 Icon Explorer 工具在 SAPUI5 Demo Kit 中查找。

结果

现在，预订表应如下所示： 生成的 XML 文件，突出显示 core:Icon 标签。 3. 从 SAP Business Application Studio 中启动应用程序，对其进行测试运行。 确保仅当客户名称输入字段包含值时，Create Customer 按钮才处于启用状态。还要确保预订表中的取消状态现在通过带工具提示的图标显示。

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

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

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