4: 更新和删除

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

4.1: 添加复选框

首先，您需要在 task 模板中添加一个 checkbox 元素。

接下来，让我们为 task 模板创建一个新文件，以便我们可以开始分离应用程序中的逻辑。

imports/ui/Task.html

<template name="task">
    <li>
        <input type="checkbox" checked="{{isChecked}}" class="toggle-checked" />
        <span>{{text}}</span>
    </li>
</template>

不要忘记删除 imports/ui/App.html 中名为 task 的模板。

4.2: 切换复选框

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

创建一个名为 Task.js 的新文件，以便我们可以为 task 模板提供处理程序

imports/ui/Task.js

import { Template } from 'meteor/templating';

import { TasksCollection } from "../api/TasksCollection";

import './Task.html';

Template.task.events({
  'click .toggle-checked'() {
    // Set the checked property to the opposite of its current value
    TasksCollection.update(this._id, {
      $set: { isChecked: !this.isChecked },
    });
  },
});

现在，让我们在 App.js 中导入新的 Task.js 文件

imports/ui/App.js

import { Template } from 'meteor/templating';
import { TasksCollection } from "../api/TasksCollection";
import './App.html';
import './Task.js';

Template.mainContainer.helpers({

...

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

4.3: 删除任务

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

首先在 task 模板中的文本后添加一个按钮并接收

imports/ui/Task.html

<template name="task">
    <li>
        <input type="checkbox" checked="{{isChecked}}" class="toggle-checked" />
        <span>{{text}}</span>
        <button class="delete">&times;</button>
...

现在在 Task.js 中添加删除逻辑。它将只是一个针对 task 模板的新事件，当用户点击删除按钮（即任何具有类 delete 的按钮）时激活。

imports/ui/Task.js

...

Template.task.events({
  ...,
  'click .delete'() {
    TasksCollection.remove(this._id);
  },
});

您的应用程序应该如下所示

4.4: 在事件处理程序中获取数据

在集合中，每个插入的文档都有一个唯一的 _id 字段，可以引用该特定文档。在事件处理程序内部，this 指的是单个任务对象。我们可以使用 this._id 获取当前任务的 _id 以及客户端上可用的任何其他字段。获得 _id 后，我们可以使用、更新和删除相关任务。这就是我们的代码将更新或删除任务的方式。

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

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