リスト

標準のJavaScript構文を使用して、繰り返しのテンプレートを作成できます。

Litは、特定の種類の動的リストをより効率的に構築するための`repeat`ディレクティブも提供しています。

子要素の位置にある式が配列または反復可能オブジェクトを返す場合、Litは配列内のすべての項目をレンダリングします。

ほとんどの場合、配列項目をより便利な形式に変換する必要があります。

リストをレンダリングするには、`map`を使用してデータのリストをテンプレートのリストに変換できます。

この式は`TemplateResult`オブジェクトの配列を返すことに注意してください。 Litは、サブテンプレートと他の値の配列または反復可能オブジェクトをレンダリングします。

テンプレートの配列を作成して、テンプレート式に渡すこともできます。

render() {
  const itemTemplates = [];
  for (const i of this.items) {
    itemTemplates.push(html`<li>${i}</li>`);
  }

  return html`
    <ul>
      ${itemTemplates}
    </ul>
  `;
}

ほとんどの場合、ループまたは`map`を使用することは、繰り返しのテンプレートを構築する効率的な方法です。 ただし、大きなリストを並べ替えたり、個々のエントリを追加および削除して変更したりする場合、このアプローチでは多数のDOMノードの更新が必要になる可能性があります。

`repeat`ディレクティブはここで役立ちます。

repeatディレクティブは、ユーザーが指定したキーに基づいてリストの効率的な更新を実行します

repeat(items, keyFunction, itemTemplate)

ここで

• `items`は配列または反復可能オブジェクトです。
• `keyFunction`は、単一の項目を引数に取り、その項目に対して保証された一意のキーを返す関数です。
• `itemTemplate`は、項目とその現在のインデックスを引数に取り、`TemplateResult`を返すテンプレート関数です。

例えば

`employees`配列を再ソートすると、`repeat`ディレクティブは既存のDOMノードを並べ替えます。

これをLitのリストのデフォルトの処理と比較するために、名前の大きなリストを反転することを考えてみましょう

• `map`を使用して作成されたリストの場合、Litはリスト項目のDOMノードを維持しますが、値を再割り当てします。
• `repeat`を使用して作成されたリストの場合、`repeat`ディレクティブは*既存の* DOMノードを並べ替えるため、最初のリスト項目を表すノードは最後の位置に移動します。

どちらの繰り返しの方が効率的かは、ユースケースによって異なります

• DOMノードの更新が移動するよりもコストがかかる場合は、`repeat`ディレクティブを使用します。

• DOMノードにテンプレート式では*制御されない*状態がある場合は、`repeat`ディレクティブを使用します。

  例えば、このリストを考えてみましょう

  html`${this.users.map((user) =>
    html`
      <div><input type="checkbox"> ${user.name}</div>
    `)
  }`

  チェックボックスにはオンまたはオフの状態がありますが、テンプレート式では制御されていません。

  ユーザーが1つ以上のチェックボックスをオンにした後にリストを並べ替えると、Litはチェックボックスに関連付けられた名前を更新しますが、チェックボックスの状態は更新しません。

これらの状況のいずれにも当てはまらない場合は、`map`またはループ文を使用します。

このページを編集