SAPUI5 Walkthrough教程（十九）——聚合绑定

我们通过添加一些 JSON 格式的发票数据来开始探索数据绑定的更多功能，这些数据显示在面板下方的列表中。

**webapp/Invoices.json (New)**发票文件仅包含五张 JSON 格式的发票，我们可以使用这些发票在应用程序中将控件绑定到它们。 JSON 是一种非常轻量级的数据存储格式，可以直接用作 SAPUI5 应用程序的数据源。

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

**webapp/manifest.json：**下图位置增加代码段：我们将新的模型发票添加到描述符的 sap.ui5 部分。这次我们想要一个JSONModel，所以我们把类型设置为sap.ui.model.json.JSONModel。uri 键是相对于组件的测试数据的路径。通过这个小配置，我们的组件将自动实例化一个新的 JSONModel，该 JSONModel 从 Invoices.json 文件加载发票数据。最后，实例化的 JSONModel 作为命名模型发票放入组件上。然后，命名模型在整个应用中可见。

,
	  "invoice": {
		"type": "sap.ui.model.json.JSONModel",
		"uri": "Invoices.json"
	  }

webapp/view/App.view.xml下图位置增加代码段：在应用程序视图中，我们添加第二个视图以在面板下方显示我们的发票。

<mvc:XMLView viewName="sap.ui.demo.walkthrough.view.InvoiceList"/>

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

<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>

webapp/i18n/i18n.properties添加代码，在文本包中添加列表的标题。

# Invoice List
invoiceListTitle=Invoices

结果：可以看到，发票数据显示出来了