【SAPUI5】Aggregation bindingで複数アイテムを表示

##はじめに
ビューにデータを表示させるために、これまでは単体のデータをビューにひもづけていました。（参考：[【SAPUI5】MVCを完成させよう](https://qiita.com/tami/items/b398f0849fb2bd178d0a)）
今回は、複数のデータを表形式で表示する方法を紹介します。
その前に、データバインディングの種類について整理しておきます。

##データバインディングの種類
データバインディングには、以下の3種類があります。

###Property binding
コントロールのプロパティにモデルのデータを直接設定することです。
![WS000044.JPG](https://qiita-image-store.s3.amazonaws.com/0/276021/395a4afb-d5dd-f1ce-7208-d72424ccaf6f.jpeg)


###Context binding（またはElement binding）
コントロールにモデルを丸ごとバインドすることです。これにより、そのコントロールおよびその子のコントロールは相対パスでモデルのデータを参照することができます。
![WS000043.JPG](https://qiita-image-store.s3.amazonaws.com/0/276021/d1516da4-df26-4b8d-a4c3-15b3d9d84c10.jpeg)


###List binding（またはAggregation binding）
複数行のデータを持つモデルで使用します。自動的に子のコントロールが作られ、子のコントロールは相対パスでモデルのデータを参照することができます。
![WS000045.JPG](https://qiita-image-store.s3.amazonaws.com/0/276021/734a9e6f-d18a-13ab-cd7a-141d80f019b1.jpeg)

##Aggregation bindingを実装してみよう
###ゴール
複数レコードを持つモデルを作成し、Listコントロールを使用して表示します。
![WS000046.JPG](https://qiita-image-store.s3.amazonaws.com/0/276021/b19b878f-18ad-c7bc-3490-6315cd9aceae.jpeg)

###ステップ
前提： [入門編の記事まとめ](https://qiita.com/tami/items/53990a14e5ca919ec35a)で作成したアプリを用意します

1. 新しいモデルを定義
2. manifest.jsonにモデルを追加
3. ビューに新しいモデルのデータを表示させる

####1. 新しいモデルを定義
modelフォルダの配下に"Pricelist.json"というファイルを新規作成します。
![WS000047.JPG](https://qiita-image-store.s3.amazonaws.com/0/276021/781142e6-c487-75f7-7f7e-8e2ae44d08fe.jpeg)

以下のコードを入力します。

```json
{ 
	"products" :[
		{
			"name" : "Pumpkin",
			"price": 15.00,
			"currency": "EUR",
			"supplier": "CompanyA"
		},
		{
			"name" : "Apple",
			"price": 200.00,
			"currency": "JPY",
			"supplier": "CompanyB"
		},
		{
			"name" : "Banana",
			"price": 50.00,
			"currency": "EUR",
			"supplier": "CompanyC"
		},
		{
			"name" : "Tomato",
			"price": 1000.00,
			"currency": "EUR",
			"supplier": "CompanyA"
		},	
		{
			"name" : "Egg",
			"price": 600.00,
			"currency": "JPY",
			"supplier": "CompanyD"
		}
	]
}
```

####2. manifest.jsonにモデルを追加
modelsセクションの一番下に、Pricelist.jsonへのリンクを追加します。modelsセクションは全体で以下のようになります。

```json
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "test.helloworld.i18n.i18n"
				}
			},
			"mPrice":{
				"type": "sap.ui.model.json.JSONModel",
				"uri": "model/Price.json"
			},
			"mPricelist":{
				"type": "sap.ui.model.json.JSONModel",
				"uri": "model/Pricelist.json"
			}
		}
```

####3. ビューに新しいモデルのデータを表示させる
App.viewの中に新しく以下のPanelコントロールを追加します。（Panelとは、画面の要素を乗せるためのお皿のようなものです）

```xml
					<Panel headerText="Product List">
						<content>
							<List items="{mPricelist>/products}">
								<items>
									<ObjectListItem
										title="{mPricelist>name}"
										number="{mPricelist>price}"
										numberUnit="{mPricelist>currency}">
									</ObjectListItem>
								</items>
							</List>							
						</content>
					</Panel>
```

ListコントロールにmPricelistのモデルをバインドします。これがAggregation bindingです。次に、Listの子要素としてObjectListItemコントロールを配置します。
親のコントロール（List）では絶対パスでモデルを参照していますが、子のコントロール（ObjectListItem）では先頭にスラッシュがなく、相対パスとなっています。
ObjectListItemの属性として、title（テキスト）、number（数字）、numberUnit（数字に添える単位）を指定します。その他の属性については[公式リファレンス](https://sapui5.hana.ondemand.com/#/api/sap.m.ObjectListItem/controlProperties)を参照してください。

App.viewのコードは全体では以下のようになります。

```xml
<mvc:View 
	controllerName="test.helloworld.controller.App" 
	xmlns="sap.m" 
	xmlns:l="sap.ui.layout" 
	xmlns:mvc="sap.ui.core.mvc">
	<App>
		<pages>
			<Page title="Page1">
				<content>
					<Panel headerText="panel1">
						<content>
							<l:VerticalLayout class="sapUiContentPadding">
								<Button text="{i18n>helloButton}" press="onShowHello"/>
								<Text text="{mPrice>/product/name}"/>
								<Text binding="{mPrice>/product}" text="{mPrice>price}"/>
							</l:VerticalLayout>								
						</content>
					</Panel>
					<Panel headerText="Product List">
						<content>
							<List items="{mPricelist>/products}">
								<items>
									<ObjectListItem
										title="{mPricelist>name}"
										number="{mPricelist>price}"
										numberUnit="{mPricelist>currency}">
									</ObjectListItem>
								</items>
							</List>							
						</content>
					</Panel>					
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>
```

###実行結果
実行結果は以下のようになります。
![WS000046.JPG](https://qiita-image-store.s3.amazonaws.com/0/276021/c67ca457-3908-e8d5-190e-2fc99c6643f3.jpeg)

##参考にしたページ
[Binding Types](https://sapui5.hana.ondemand.com/#/topic/91f0d8ab6f4d1014b6dd926db0e91070)
[Get Started: Setup and Tutorials-Walkthrough-Step 20: Aggregation Binding](https://sapui5.hana.ondemand.com/#/topic/bf71375454654b44af01379a3c3a6273)