4: 更新和删除

到目前为止，您只将文档插入到我们的集合中。让我们看看如何通过与用户界面交互来更新和删除它们。

4.1: 添加复选框

首先，您需要在 Task 组件中添加一个 checkbox 元素。

imports/ui/Task.svelte

<li>
    <input
            type="checkbox"
            readonly
            checked={!!task.isChecked}
            on:click={toggleChecked}
    />
    <span>{ task.text }</span>
</li>

4.2: 切换复选框

现在您可以通过切换其 isChecked 字段来更新任务文档。

imports/ui/Task.svelte

<script>
  import { TasksCollection } from '../api/TasksCollection';

  export let task;

  const toggleChecked = () => {
    // Set the isChecked property to the opposite of its current value
    TasksCollection.update(task._id, {
      $set: { isChecked: !task.isChecked }
    });
  };
</script>
..

现在您的应用应该如下所示

4.3: 删除任务

您可以用几行代码删除任务。

首先在 Task 组件中的 task.text 后添加一个按钮

imports/ui/Task.svelte

..
<li>
    <input
            type="checkbox"
            readonly
            checked={!!task.isChecked}
            on:click={toggleChecked}
    />
    <span>{ task.text }</span>
    <button class="delete" on:click={deleteThisTask}>&times;</button>
</li>

现在在 <script /> 标签内添加删除逻辑。它将只是一个当用户点击删除按钮时激活的新函数。

imports/ui/Task.svelte

<script>
    ..
    const deleteThisTask = () => {
        TasksCollection.remove(task._id);
    };
</script>
..

您的应用应该如下所示

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

在下一步中，我们将使用 Flexbox 和 CSS 来改进应用程序的外观。