列表

您可以使用标准的 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 或循环语句。

编辑此页面