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

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

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

&lt;template is="dom-repeat" items="{{someones}}"&gt;
  &lt;some-child-element data={{item}}&gt;&lt;/some-child-element&gt;
&lt;/template&gt;

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

&lt;template is="dom-repeat" items="{{someones}}" as="someone"&gt;
  &lt;some-child-element data={{someone}}&gt;&lt;/some-child-element&gt;
&lt;/template&gt;

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

&lt;template is="dom-repeat" items="{{someones}}" as="someone"&gt;
  &lt;some-child-element data={{someone}}&gt;
    &lt;template is="dom-repeat" items="{{someone.friends}}"&gt;
      &lt;some-grand-child-element data={{item}} status={{someone.status}}&gt;
	&lt;/template&gt;
  &lt;/some-child-element&gt;
&lt;/template&gt;

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

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

⁋ 2018/02/14↻ 2024/12/18