UI(六) Aggregation Binding、Data Types

注意：自动模型实例化仅在SAPUI5 1.30版本可用。如果你使用的是旧版本，你可以在Component.js文件的onInit方法中手动实例化资源包和应用的其他模型，就像我们在Component Configuration中对资源包所做的那样。

尽可能使用数据类型而不是自定义格式化器。

现在我们已经为应用程序建立了一个良好的结构，是时候添加一些更多的功能了。我们将通过添加一些JSON格式的发票数据，开始数据绑定的更多特性，这些数据将显示在面板下方的列表中。

webapp/Invoices.json (New)

{
  "Invoices": [
	{
	  "ProductName": "Pineapple",
	  "Quantity": 21,
	  "ExtendedPrice": 87.2000,
	  "ShipperName": "Fun Inc.",
	  "ShippedDate": "2015-04-01T00:00:00",
	  "Status": "A"
	},
	{
	  "ProductName": "Milk",
	  "Quantity": 4,
	  "ExtendedPrice": 9.99999,
	  "ShipperName": "ACME",
	  "ShippedDate": "2015-02-18T00:00:00",
	  "Status": "B"
	},
	{
	  "ProductName": "Canned Beans",
	  "Quantity": 3,
	  "ExtendedPrice": 6.85000,
	  "ShipperName": "ACME",
	  "ShippedDate": "2015-03-02T00:00:00",
	  "Status": "B"
	},
	{
	  "ProductName": "Salad",
	  "Quantity": 2,
	  "ExtendedPrice": 8.8000,
	  "ShipperName": "ACME",
	  "ShippedDate": "2015-04-12T00:00:00",
	  "Status": "C"
	},
	{
	  "ProductName": "Bread",
	  "Quantity": 1,
	  "ExtendedPrice": 2.71212,
	  "ShipperName": "Fun Inc.",
	  "ShippedDate": "2015-01-27T00:00:00",
	  "Status": "A"
	}
  ]
}

JSON是一种非常轻量级的数据存储格式，可以直接用作SAPUI5应用程序的数据源。

webapp/manifest.json

{
…
  "sap.ui5": {
	"rootView": "sap.ui.demo.walkthrough.view.App",
[…]
	"models": {
	  "i18n": {
		"type": "sap.ui.model.resource.ResourceModel",
		"settings": {
		  "bundleName": "sap.ui.demo.walkthrough.i18n.i18n"
		}
	  },
	  "invoice": {
		"type": "sap.ui.model.json.JSONModel",
		"uri": "Invoices.json"
	  }
	}
  }
}

我们将一个新的模型invoice添加到sap.ui5的描述部分。这次我们想要一个JSON模型，所以我们将其类型设置为sap.ui.model.json.JSONModel。uri键是测试数据相对于组件的路径。有了这个小小的配置，我们的组件将自动实例化一个新的JSONModel，它将从invoice中加载发票数据。json文件。最后，实例化的JSONModel作为命名模型发票放到组件上。然后，命名的模型在整个应用程序中都是可见的。

webapp/view/App.view.xml

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<Shell>
		<App class="myAppDemoWT">
			<pages>
				<Page title="{i18n>homePageTitle}">
					<headerContent>
						<Button
							icon="sap-icon://hello-world"
							press=".onOpenDialog"/>
					</headerContent>
					<content>
						<mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/>
						<mvc:XMLView viewName="sap.ui.demo.walkthrough.view.InvoiceList"/>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

在应用程序视图中，我们添加了第二个视图来显示面板下的invoices。

webapp/view/InvoiceList.view.xml (New)

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

新视图显示一个带有自定义标题文本的列表控件。列表的根路径invoice项目被绑定到JSON数据。由于我们定义了一个已命名的模型，所以必须在每个绑定定义前面加上标识符invoice>。
在项目聚合中，我们为列表定义了模板，该列表将自动重复每个发票的测试数据。更准确地说，我们使用ObjectListItem为项目聚合的每个聚合子项创建一个控件。列表项的title属性绑定到单个发票的属性。这是通过定义一个相对路径来实现的。这是因为我们通过items={invoice>/}将项目聚合绑定到发票上。

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

添加列表的标题。

发票清单已经很漂亮了，但是没有标价的发票是什么呢? 通常价格以技术格式存储，并带有 ‘ . ’ 的分隔符。例如，我们的发票有计算价格87.2，没有货币。我们将使用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}"/>
	</items>
   </List>
</mvc:View>

通过将number和numberUnit属性添加到ObjectListItem控件，我们将价格添加到视图中的发票列表中，然后通过将绑定语法的type属性设置为sap.ui.model.type.Currency，我们将货币数据类型应用到数字上。
正如您在上面看到的，我们为ObjectListItem的number属性使用了特殊的绑定语法。这种绑定语法利用了所谓的“计算字段”，它允许将来自不同模型的多个属性绑定到控件的单个属性。来自不同模型的属性称为“部件”。在上面的示例中，控件的属性是number和绑定属性
(“部分”)从两个不同的模型中检索到的invoice>ExtendedPrice和view>/currency。

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

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

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

	});
});

为了能够访问不属于数据模型的货币代码，我们在发票列表的控制器中定义了一个视图模型。这是一个简单的JSON模型，只有一种关键货币和价值EUR。这可以绑定到数字字段的格式化程序。视图模型可以持有分配给控件的任何配置选项，以绑定诸如可见性之类的属性。