Step 21: Data Types

Step 21: Data Types

https://ui5.sap.com/#/topic/dfe04650afc046e0802abb1a1a90d2d9

上一节的json文件里只有价格，但是没有币种，UI5通过使用Data Types，可以根据币种的不同，自动格式化价格数字，
比如虽然价格的数字是一样的，但是日元和美元的表示格式是不同的。

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>

1，追加了controller
2，number and numberUnit属性：在每一个条目的右侧显示价格和币种
3，type属性，通过币种的data type的不同，格式化数字
4，在number属性上使用了特殊的binding syntax 。这种绑定语法利用了所谓的“计算字段”，它允许将来自不同模型的多个属性绑定到控件的单个属性。parts代表多个model，这里用了2个model，一个是invoice>ExtendedPrice，一个是view>/currency.
5，Currency type是根据币种的不同，格式化数字。由于Invoices.json文件里没有币种，所以加了一个controller，负责返回币种。
6，numberUnit属性，在价格的下面显示币种。
7，showMeasure属性，如果是true的话，则在价格后面显示币种，因为加了numberUnit属性，所以这里设置成false就可以，或者整体不要formatOptions属性。

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");
		}

	});
});

约定：尽可能使用Data Types，不要使用自定义的格式化数字的程序。

vx:xiaoshitou5854