6: 过滤任务

在本步骤中，您将根据状态过滤任务并显示待办事项的数量。

6.1: 添加隐藏任务按钮

首先，您将添加一个按钮来显示或隐藏列表中的已完成任务。

使用 Svelte，这将是一个非常简单的任务，因为我们无需做太多事情来保持按钮的状态。让我们添加我们的按钮

imports/ui/App.svelte

<script>
    ..
    let hideCompleted = false;
    ..
    const setHideCompleted = value =>  {
        hideCompleted = value;
    }
</script>

<div class="app">
..
    <div class="main">
        <TaskForm />
        <div class="filter">
            <button on:click={() => setHideCompleted(!hideCompleted)}>
                {hideCompleted ? 'Show All' : 'Hide Completed'}
            </button>
        </div>
        ..
    </div>
</div>

6.2: 按钮样式

您应该为按钮添加一些样式，使其看起来不那么灰暗，并且对比度良好。您可以使用以下样式作为参考

client/main.css

.filter {
  display: flex;
  justify-content: center;
}

.filter > button {
  background-color: #62807e;
}

6.3: 过滤任务

现在，如果用户只想查看待办事项，则可以在 Mini Mongo 查询中的选择器中添加一个过滤器，您需要获取所有未选中 isChecked 为 true 的任务。

imports/ui/App.svelte

<script>
    ..
    const hideCompletedFilter = { isChecked: { $ne: true } };

    $m:tasks = TasksCollection.find(
      hideCompleted ? hideCompletedFilter : {}, { sort: { createdAt: -1 } }
    ).fetch()
    ..
</script>
..

6.4: Meteor Dev Tools 扩展

您可以安装扩展程序以可视化 Mini Mongo 中的数据。

Meteor DevTools Evolved 将帮助您调试应用程序，因为您可以看到 Mini Mongo 中有哪些数据。

您还可以查看 Meteor 从服务器发送和接收的所有消息，这有助于您了解 Meteor 的工作原理。

使用此 链接 在 Google Chrome 浏览器中安装它。

6.5: 待办事项

更新 App 组件以在应用栏中显示待办事项的数量。

如果没有待办事项，您应该避免在应用栏中添加零。

imports/ui/App.svelte

<script>
    import { TasksCollection } from '../api/TasksCollection';
    ..
    let incompleteCount;
    let pendingTasksTitle = '';
    let tasks = [];

    $m: {
        tasks = TasksCollection.find(hideCompleted ? hideCompletedFilter : {}, { sort: { createdAt: -1 } }).fetch()

        incompleteCount = TasksCollection.find(hideCompletedFilter).count();

        pendingTasksTitle = `${
                incompleteCount ? ` (${incompleteCount})` : ''
        }`;
    }
    ..
</script>

<div class="app">
    <header>
        <div class="app-bar">
            <div class="app-header">
                <h1>📝️ To Do List {pendingTasksTitle}</h1>
            </div>
        </div>
    </header>
    ..
</div>

您的应用程序应如下所示

回顾：您可以查看本步骤结束时代码应如何编写 此处

在下一步中，我们将向您的应用程序中添加用户访问权限。