上一章讲了数据绑定（Jason），Data Types(数据类型)。

本章继续讲SAP Fiori 开发的知识。

下面是详细内容。

1，Expression Binding（表达式绑定）

1），InvoiceList.view.xml

<mvc:View
    controllerName="ui5.walkthrough.controller.InvoiceList"
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc">
    <List
        headerText="{i18n>invoiceListTitle}"
        class="sapUiResponsiveMargin"
        width="auto"
        items="{invoice>/Invoices}">
        <items>
            <ObjectListItem
                core:require="{
                    Currency: 'sap/ui/model/type/Currency'
                }"
                title="{invoice>Quantity} x {invoice>ProductName}"
                number="{
                    parts: [
                        'invoice>ExtendedPrice',
                        'view>/currency'
                    ],
                    type: 'Currency',
                    formatOptions: {
                        showMeasure: false
                    }
                }"
                numberUnit="{view>/currency}"
                numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"/>
        </items>
    </List>
</mvc:View>

- numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"

 这个就是表达式写法

 这里的Error，Success 是 numberState中的选项，除此之外，还有Warning，Information

 咱们上一章学习了如何查找Help，看下面链接，好像还有一个 None选项哈

2），运行看效果

可以看到 Error 就是 红色，Success 是绿色

下面再来看看Warning，Information，代码改成这样

- numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Warning' : 'Information' }"/> 

Warning 是橙色，Information 是 蓝色。

None 则是跟没用 numberState 一样，是默认的黑色。

- numberState="{= ${invoice>ExtendedPrice} > 50 ? 'None' : 'Information' }"/>

当然本节的意义不是为了看numberState，而是说可以在View里面加简单的表达式。

那如果不加表达式的话，也可以像 numberUnit="{view>/currency}" 一样，在Controller里面将一个字段赋值给名叫“view”(名称可以任意)的Model，然后就可以引用了。

比如这里就简单加个默认值 state: Error

这样也是可以的。

当然我这里就是简单的给个固定值，根据需要，可以在Controller里面加设定逻辑。

2，Custom Formatters（自定义格式化）

上一章里面用Data Type来实现格式化，那如果是有自定义需求，就需要自定义。

1），formatter.js

sap.ui.define([], () => {
	"use strict";

	return {
		statusText(sStatus) {
			const oResourceBundle = this.getOwnerComponent().getModel("i18n").getResourceBundle();
			switch (sStatus) {
				case "A":
					return oResourceBundle.getText("invoiceStatusA");
				case "B":
					return oResourceBundle.getText("invoiceStatusB");
				case "C":
					return oResourceBundle.getText("invoiceStatusC");
				default:
					return sStatus;
			}
		}
	};
});

- statusText(sStatus) {

  statusText 是函数名，sStatus 是参数

咱们这里的意图是想把Json文件里的 Status 传值给上面的那个函数 

2），InvoiceList.view.xml

<mvc:View
    controllerName="ui5.walkthrough.controller.InvoiceList"
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc">
    <List
        headerText="{i18n>invoiceListTitle}"
        class="sapUiResponsiveMargin"
        width="auto"
        items="{invoice>/Invoices}">
        <items>
            <ObjectListItem
                core:require="{
                    Currency: 'sap/ui/model/type/Currency'
                }"
                title="{invoice>Quantity} x {invoice>ProductName}"
                number="{
                    parts: [
                        'invoice>ExtendedPrice',
                        'view>/currency'
                    ],
                    type: 'Currency',
                    formatOptions: {
                        showMeasure: false
                    }
                }"
                numberUnit="{view>/currency}"
                numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }">
                <firstStatus>
                    <ObjectStatus
                        core:require="{
                            Formatter: 'ui5/walkthrough/model/formatter'
                        }"
                        text="{
                            path: 'invoice>Status',
                            formatter: 'Formatter.statusText.bind($controller)'
                        }"/>
                </firstStatus>
            </ObjectListItem>
        </items>
    </List>
</mvc:View>

- Formatter: 'ui5/walkthrough/model/formatter'：这个指明用哪个controller，就上面刚定义那个

- path: 'invoice>Status', ：这段指出是把 json 里的 Status属性当参数传过去

- formatter: 'Formatter.statusText.bind($controller)'：调用的是controller 里面的 statusText方法

 <firstStatus>
     <ObjectStatus
         core:require="{
             Formatter: 'ui5/walkthrough/model/formatter'
         }"
         text="{
             path: 'invoice>Status',
             formatter: 'Formatter.statusText.bind($controller)'
         }"/>
 </firstStatus>

- 关于.bind($controller)的作用

（下面这段是出自Deepseek）

在SAPUI5/Fiori开发中，Formatter.statusText.bind($controller)这行代码中的.bind()方法有特定的用途，主要解决以下两个关键问题：
1. 保持this上下文

在JavaScript中，当函数被作为回调或在不同上下文中调用时，this关键字的指向会改变。使用.bind()可以确保：

    - 格式化函数(statusText)中的this始终指向控制器实例

    - 这样在格式化函数内部就可以访问控制器的其他方法和属性

2. 传递控制器引用

$controller是SAPUI5提供的特殊变量，代表当前视图的控制器实例。通过.bind($controller)：

    - 将控制器实例绑定为格式化函数的this上下文

    - 允许格式化函数访问控制器的所有公共方法和属性

为什么需要这样做？

假设你的格式化函数是这样的：
javascript

statusText: function(sStatus) {
    // 这里可能需要访问控制器的方法或属性
    var someControllerProperty = this.getView().getModel("someModel");
    // 或者调用控制器方法
    return this._formatStatus(sStatus);
}

如果没有.bind($controller)：

    - this在格式化函数内部可能指向全局对象(window)或其他上下文

    - 导致无法访问控制器的方法和属性

替代方案

如果不使用.bind()，也可以：

    - 使用箭头函数(但XML视图不支持直接写箭头函数)

    - 在控制器中预先绑定好格式化函数

    - 使用闭包方式访问控制器

但在SAPUI5的XML视图中，.bind($controller)是最简洁和标准的做法。

实际应用场景

常见需要访问控制器的情况包括：

    - 访问i18n模型获取翻译文本

    - 访问其他业务模型数据

    - 调用控制器的工具方法进行复杂格式化

    - 访问视图或控件的引用

所以这个.bind()调用确保了格式化函数能在正确的上下文中执行。

3），i18n.properties

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok

# Invoice List
invoiceListTitle=Invoices
invoiceStatusA=New
invoiceStatusB=In Progress
invoiceStatusC=Done

4），运行看效果

用 firstStatus 将状态显示在右侧字段的底部 

这里再学习一下 ObjectStatus控件。

- SAPUI5 ObjectStatus 控件的常用属性

ObjectStatus 是 SAP Fiori 应用中常用的控件，用于显示对象的状态。以下是它的主要属性分类：
核心属性

   - text - 状态文本

        示例：text="已批准"

        通常绑定到模型数据：text="{path: 'model>status'}"

   - state - 状态视觉样式

        可选值：None(默认), Success, Warning, Error, Information

        示例：state="Success"

   - icon - 状态图标

        示例：icon="sap-icon://accept"

        可以使用 SAPUI5 图标库中的任何图标

   - title - 工具提示文本

        鼠标悬停时显示的提示信息

数字/数值相关属性

  - number - 显示数值

        示例：number="42"

  - numberUnit - 数值单位

        示例：numberUnit="件"

交互属性

  - active - 是否可点击

        true/false，设置为 true 时可添加点击事件

  - press - 点击事件处理函数

        示例：press=".onStatusPress"

布局属性

  - inverted - 反色显示

        反转颜色方案，用于深色背景

  - iconDensityAware - 图标密度适配

        默认为 true，根据设备调整图标大小

状态组合属性

  - statuses (聚合) - 多个状态的集合

        允许在一个控件内显示多个状态

常用绑定示例
xml

<ObjectStatus
    text="{i18n>approvalStatus}"
    state="{path: 'model>status', 
            formatter: '.formatStatusState'}"
    icon="{path: 'model>status', 
           formatter: '.formatStatusIcon'}"
    number="{model>quantity}"
    numberUnit="{i18n>pieces}"
    tooltip="{i18n>statusTooltip}"
    press="onStatusPress"/>

实际应用场景

    显示审批状态（批准/拒绝/待处理）

    显示库存状态（充足/短缺）

    显示订单状态（已发货/处理中）

    显示系统健康状态

    带有数量的状态指示

通过组合这些属性，可以创建丰富多样的状态显示效果，同时保持 SAP Fiori 的设计一致性。

咱们这里给它加一个icon 试试：

就是这样的哈，感觉还真不错。 

以上就是本篇的全部内容。