第21步:数据类型_formatoptions: {showmeasure: false}-CSDN博客

说明

发票清单看起来已经很不错了，但是没有指定价格的发票是什么呢?通常，价格以技术格式存储，并在数据模型中使用 “.” 分隔符。例如，我们发票中的菠萝是一个计算后没有货币的价格 87.2。我们将使用SAPUI5数据类型格式化为与区域设置相关的带有小数分隔符和保留两位数字的正确价格。

预览

在这里插入图片描述

有价格和数量单位的发票清单

代码

你可以在演练-第21步查看和下载所有文件。

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}"/>
	</items>
   </List>
</mvc:View>

通过向objectistitem控件添加number和numberUnit属性，我们将价格添加到视图中的发票列表中，然后通过将绑定语法的type属性设置为sap.ui.model.type.Currency，将货币数据类型应用到数字上。

正如您在上面看到的，我们对objectistitem的number属性使用了特殊的绑定语法。这种绑定语法使用了所谓的“Calculated Fields”，它允许将来自不同模型的多个属性绑定到控件的单个属性。来自不同模型的属性绑定称为“parts”。在上面的示例中，控件的属性是number，从两个不同的模型中检索到的绑定属性(“parts”)是 invoice>ExtendedPrice 和 view>/currency。

我们希望以欧元显示价格，通常这种货币是后端数据模型的一部分。在我们的例子中不是这样的，所以我们需要在应用程序中直接定义它。因此，我们为发票列表添加了一个控制器，并使用currency属性作为绑定语法的第二部分。货币类型将根据货币代码为我们处理价格的格式化。在我们的例子中，价格显示为两位小数。

此外，我们将格式化选项showMeasure设置为false。这将隐藏number属性的货币代码，因为它作为单独的属性numberUnit传递给objectistitem控件。

webapp/controller/InvoiceList.controller.js (New)

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
	"use strict";

	return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {

		onInit : function () {
			var oViewModel = new JSONModel({
				currency: "EUR"
			});
			this.getView().setModel(oViewModel, "view");
		}

	});
});