UI（七）Expression Binding、Custom Formatters

注意：只在简单的计算中使用表达式绑定。

有时SAPUI5的预定义类型不够灵活，你想在视图中进行简单的计算或格式化——这就是表达式真正有用的地方。我们使用它们来根据数据模型中的当前数字来格式化我们的价格。

webapp/view/InvoiceList.view.xml

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

我们在声明性视图中添加了属性numberState，并在方括号中引入了新的绑定语法。这个符号用于初始化一个新的绑定语法，它被称为一个表达式，可以执行简单的计算逻辑，如这里所示的三元运算符。
操作符的条件是来自数据模型的一个值。表达式绑定中的模型绑定必须用$符号转义，正如您在代码中看到的那样。如果价格高于50，我们将状态设置为’ Error ‘(数字将以红色显示)，否则设置为’ Success '(数字将以绿色显示)。

webapp/model/formatter.js (New)

sap.ui.define([], function () {
	"use strict";
	return {
		statusText: function (sStatus) {
			var resourceBundle = this.getView().getModel("i18n").getResourceBundle();
			switch (sStatus) {
				case "A":
					return resourceBundle.getText("invoiceStatusA");
				case "B":
					return resourceBundle.getText("invoiceStatusB");
				case "C":
					return resourceBundle.getText("invoiceStatusC");
				default:
					return sStatus;
			}
		}
	};
});

我们在应用程序项目中创建了一个新的文件夹模型。新的格式化程序文件被放置在应用程序的模型文件夹中，因为格式化程序处理数据属性，并将它们格式化以显示在UI上。到目前为止，我们没有任何与模型相关的依赖，除了发票。这一次，我们不从任何基对象扩展，而只是在sap.ui.define调用中返回一个带有格式化器函数的JavaScript对象。函数statusText从数据模型中获取技术状态作为输入参数，并返回从resourceBundle文件中读取的人类可读文本。

webapp/controller/InvoiceList.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"../model/formatter"
], function (Controller, JSONModel, formatter) {
	"use strict";
	return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {
		formatter: formatter,
		onInit : function () {
			var oViewModel = new JSONModel({
				currency: "EUR"
			});
			this.getView().setModel(oViewModel, "view");
		}
	});
});

要加载我们的格式化程序函数，必须将其添加到
InvoiceList.controller.js。在这个控制器中，我们首先向自定义格式化器模块添加一个依赖项。控制器只是将加载的格式化程序函数存储在本地属性格式化程序中，以便能够在视图中访问它们。
要加载我们的格式化程序函数，必须将其添加到InvoiceList.controller.js。在这个控制器中，我们首先向自定义格式化器模块添加一个依赖项。控制器只是将加载的格式化程序函数存储在本地属性格式化程序中，以便能够在视图中访问它们。

webapp/controller/InvoiceList.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	**"../model/formatter"**
], function (Controller, JSONModel, formatter) {
	"use strict";
	return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {
		formatter: formatter,
		onInit : function () {
			var oViewModel = new JSONModel({
				currency: "EUR"
			});
			this.getView().setModel(oViewModel, "view");
		}
	});
});

要加载我们的格式化程序函数，必须将其添加到InvoiceList.controller.js。在这个控制器中，我们首先向自定义格式化器模块添加一个依赖项。控制器只是将加载的格式化程序函数存储在本地属性格式化程序中，以便能够在视图中访问它们。

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

我们使用firstStatus聚合将状态添加到显示发票状态的ObjectListItem。使用绑定语法的保留属性格式化器指定自定义格式化器函数。一个“.”，表示该函数是在当前视图的控制器中查找的。在那里，我们定义了一个属性格式化器来保存我们的格式化器函数，因此我们可以通过以下方式来访问它.formatter.statusText。

webapp/i18n/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

我们向资源包中添加了三个新条目，它们反映了翻译后的状态文本。属性的number属性下面显示这些文本依赖于发票状态的ObjectListItem。