SAP UI5 应用开发教程之二十 - SAP UI5 的表达式绑定用法讲解

在本教程的前一步骤 SAP UI5 初学者教程之十九 - SAP UI5 数据类型和复杂的数据绑定里，我们已经开发了一个具有金额和货币显示的发票列表，效果如下图所示：

本步骤我们继续对这个发票列表添加一些额外的效果。如果发票金额大于 50，就用红色高亮这个金额。

效果如下图所示：

本步骤源代码位置：https://github.com/wangzixi-diablo/ui5-tutorial/tree/main/20

下面是详细实现步骤和原理解析。

所谓表达式绑定(expression binding)，其使用场合是，当我们需要在 UI 上显示一些数据，这些数据并没有在后台直接持久化存储，而是动态计算而成。一个最简单易懂的例子，就是我们在 UI 显示每个员工的年龄，但是后台只存储了员工的出生年份。因此，UI 显示年龄的逻辑，可以用下列表达式来计算：

年龄 = 当前年份 - 该员工出生年份

上面就是数据绑定话题里一个典型的表达式的例子。

回到本文的例子，我们只需要在 InvoiceList.view.xml 文件里，为列表的标准字段，numberState，绑定一个表达式：

${invoic

SAP UI5 应用开发教程之二十 - SAP UI5 的表达式绑定用法讲解相关推荐

SAP UI5 应用开发教程之二十九 - SAP UI5 的路由和导航功能介绍试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之二十六 - OData 服务配合 Mock 服务器的使用步骤详解
从本教程 24 步骤开始,我们接触了 OData 模型.本地学习 SAP UI5 应用开发时,如果直接消费远端的 OData 服务,就会遇到跨域错误. 步骤 24 SAP UI5 初学者教程之二十四 ...
SAP UI5 应用开发教程之二十五 - 使用代理服务器解决 SAP UI5 应用访问远端 OData 服务的跨域问题
在本教程的前一篇文章:SAP UI5 初学者教程之二十四 - 如何使用 OData 数据模型我们试图在本地运行的 SAP UI5 应用(localhost:8080)里, 访问远端的 OData 服 ...
SAP UI5 应用开发教程之二十七 - SAP UI5 应用的单元测试工具 QUnit 介绍
Jerry 在之前做 SAP UI5 标准开发和现在使用 Angular 开发 SAP Spartacus 应用时,我们团队的开发规范就是,每增添一个新的前端 feature,必须要用一个新增的单元测 ...
SAP UI5 应用开发教程之二十九 - SAP UI5 的路由和导航功能介绍
本教程目前为止的二十八个步骤,我们开发的 SAP UI5 仅仅包含了一个单独的页面.本步骤我们将额外开发一个新的页面,并学习如何在这些不同的页面之间进行路由(route)和导航(navigation) ...
SAP UI5 应用开发教程之二十一 - SAP UI5 的自定义格式器(Custom Formatter)
前一个步骤,我们已经通过 SAP UI5 的表达式绑定功能,给发票列表增添了动态高亮某些字段的功能: 对应的绑定表达式的值如下: 可以看到这些绑定表达式是直接在 XML 视图里编写的.如果自定义的逻辑 ...
SAP UI5 应用开发教程之二十八 - SAP UI5 应用的集成测试工具 OPA 介绍
本教程前一步骤,我们介绍了 SAP UI5 单元测试工具 QUnit 的使用方法.本步骤介绍测试金字塔模型中位于单元测试上层的集成测试在 SAP UI5 中的实现工具:OPA. 本步骤对应的源代码位于 ...
SAP UI5 应用开发教程之二十四 - 如何使用 OData 数据模型
本教程之前的二十三个步骤,使用的数据模型都是 JSON 模型.从本步骤开始,我们要学习另一种非常重要的数据模型:OData 数据模型. OData 数据模型也是 SAP 产品里广泛使用的数据模型,比如 ...
SAP UI5 应用开发教程之四十一 - Chrome 扩展 UI5 Inspector 的离线安装和使用方法试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...

SAP UI5 应用开发教程之二十 - SAP UI5 的表达式绑定用法讲解

SAP UI5 应用开发教程之二十 - SAP UI5 的表达式绑定用法讲解相关推荐

最新文章

热门文章