第20步:聚合绑定

最新推荐文章于 2025-09-17 12:28:15 发布

翻译最新推荐文章于 2025-09-17 12:28:15 发布 · 240 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://sapui5.hana.ondemand.com/#/topic/bf71375454654b44af01379a3c3a6273

SAPUI5 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了如何在SAPUI5应用中通过JSON格式的发票数据，实现数据绑定并展示发票清单。涉及JSONModel的配置、XML视图的使用和发票数据的显示。

说明

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

预览

在这里插入图片描述

一个发票清单显示在面板下方

代码

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

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"
	}
  ]
}

发票文件仅包含5个JSON格式的发票，我们可以用它在应用中绑定控件。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",
		  "supportedLocales": [""],
		  "fallbackLocale": ""
		}
	  },
	  "invoice": {
		"type": "sap.ui.model.json.JSONModel",
		"uri": "Invoices.json"
	  }
	}
  }
}

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

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

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>

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

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>

新视图显示一个带有自定义标题文本的列表控件。列表的行项目聚合被绑定到JSON数据的根路径Invoices 上。因为我们定义了一个命名模型，所以我们必须在每个绑定定义的前面加上标识符 invoice>。

在items聚合中，我们为列表定义了模板，该模板自动为我们测试数据的每个发票重复创建行。更准确地说，我们使用objectistitem为items聚合的每个聚合子项创建控件。列表项的title属性绑定到单个发票的属性。这是通过定义一个相对路径来实现的(开头没有 / )。这是因为我们已经通过 items={invoice>/Invoices} 将items聚合绑定到invoices。

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

在文本包中新增了列表的标题。

章节