随着模板变得越来越大、越来越复杂，将它们分解成更小的部分会有所帮助。这里我们为待办事项列表添加了一个 Hide completed 复选框。我们还将主要的待办事项列表模板提取到一个单独的本地常量 todos 中。你可以将其视为一个部分模板。

你会注意到 todos 部分模板与上一步中的 <ul> 元素_几乎_相同，只是它使用了新的 items 本地常量而不是 this._listItems。

你的任务：重构模板，当 Hide completed 被勾选时隐藏已完成的项目，并在没有未完成项目显示时显示一条消息。

• 计算要显示的项目。

  找到 render() 方法开头的 items 常量定义，用以下代码替换：

  const items = this.hideCompleted
    ? this._listItems.filter((item) => !item.completed)
    : this._listItems;

• 定义一些部分模板。

  在 return 语句之前添加以下代码。

  const caughtUpMessage = html`
    <p>
    你已经全部完成了！
    </p>
  `;
  const todosOrMessage = items.length > 0
    ? todos
    : caughtUpMessage;

• 组合在一起。

  在主模板中，找到 ${todos} 表达式，用你的新部分模板替换它：

  ${todosOrMessage}

  最终结果应该如下所示：

  return html`
    <h2>待办事项</h2>
    ${todosOrMessage}
    <input id="newitem" aria-label="New item">
    ...

尝试点击 Hide completed 并确保你的代码正常工作。继续并勾选 Complete Lit tutorial。（如果有什么不工作，检查你的工作或点击 Solve 查看完成的代码。）

要继续探索 Lit，可以尝试以下教程之一：

• 使用列表 更详细地探索重复模板。
• 响应式 深入了解响应式属性以及 Lit 组件如何更新。

如果你想查看更多交互式示例并继续在线实验 Lit，可以前往 Playground。或者如果你准备尝试一些真实的东西，可以查看我们的组件入门工具包或将 Lit 添加到现有项目。