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

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

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

###Property binding
コントロールのプロパティにモデルのデータを直接設定することです。

###Context binding（またはElement binding）
コントロールにモデルを丸ごとバインドすることです。これにより、そのコントロールおよびその子のコントロールは相対パスでモデルのデータを参照することができます。

###List binding（またはAggregation binding）
複数行のデータを持つモデルで使用します。自動的に子のコントロールが作られ、子のコントロールは相対パスでモデルのデータを参照することができます。

##Aggregation bindingを実装してみよう
###ゴール
複数レコードを持つモデルを作成し、Listコントロールを使用して表示します。

###ステップ
前提： 入門編の記事まとめで作成したアプリを用意します

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

####1. 新しいモデルを定義
modelフォルダの配下に"Pricelist.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セクションは全体で以下のようになります。

		"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とは、画面の要素を乗せるためのお皿のようなものです）

					<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（数字に添える単位）を指定します。その他の属性については公式リファレンスを参照してください。

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

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

###実行結果
実行結果は以下のようになります。

##参考にしたページ
Binding Types
Get Started: Setup and Tutorials-Walkthrough-Step 20: Aggregation Binding