category

dom-repeat: Polymerの階層データ処理

Polymerのdom-repeatを活用することで階層データのテンプレートを構造的に記述できます。

たとえばsomeonesというプロパティに、オブジェクトのArray([{},{},]の構造)を保持しているケースでは、以下のようなコードになります(HTMLテンプレートのみ抜粋)。

<template is="dom-repeat" items="{{someones}}">
  <some-child-element data={{item}}></some-child-element>
</template>

この形式で some-child-elementの一覧表示を記述できており、子コンポーネントのdataプロパティに個別のオブジェクトが設定されます。
repeat内の要素はデフォルトでitemという名称になりますが、以下のようにas属性を利用すると命名することも可能です。

<template is="dom-repeat" items="{{someones}}" as="someone">
  <some-child-element data={{someone}}></some-child-element>
</template>

個別オブジェクトに名前を設定する決定的なメリットは、データが3階層以上になったときに、たとえば孫ノードから外側のノードを適切に参照できることです。
(名前を付けなくても、見た目上こそitemが羅列されるもののdom-repeat内のitemを参照するため動作に支障はありません)

<template is="dom-repeat" items="{{someones}}" as="someone">
  <some-child-element data={{someone}}>
    <template is="dom-repeat" items="{{someone.friends}}">
      <some-grand-child-element data={{item}} status={{someone.status}}>
	</template>
  </some-child-element>
</template>

この例で、再奥のsome-grand-child-elementはsomeone.friendsのリストになっていますが、statusプロパティで外側のsomeone.statusを参照できます(プロパティへの割り当ては必要です)。

dom-repeatでテンプレートを記述しておくと、元のプロパティのデータを更新した際に表示もデータに合わせて更新されます(ただし性能上、Polymerが監視するデータには一定の制約があります)。
ネストの深いデータのWebUIはコード量が爆発しがちですが、Web ComponentsではHTML/CSS/Javascriptをコードセットとして記述できるため、dom-repeatを活用することで階層別のビルディングブロックとしてコードを切り分けられます。