列表

您可以使用標準 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 節點，因此代表第一個列表項目的節點會移動到最後一個位置。

哪個 repeat 更有效率取決於您的使用案例

• 如果更新 DOM 節點比移動它們更昂貴，請使用 repeat 指令。

• 如果 DOM 節點具有不是由模板表達式控制的狀態，請使用 repeat 指令。

  例如，考慮這個列表

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

  核取方塊具有選中或未選中的狀態，但它不受模板表達式的控制。

  如果使用者勾選一個或多個核取方塊後重新排序列表，Lit 將更新與核取方塊相關聯的名稱，但不會更新核取方塊的狀態。

如果這些情況都不適用，請使用 map 或迴圈語句。

編輯此頁面