更新與刪除待辦事項

到目前為止，我們只透過插入文件(insert documents)的方式來與資料庫互動。接下來我們將會學習如何更新(update)或是刪除(remove)文件。

現在，讓我們來修改task模板(template)吧!首先，我們把它移到獨立的檔案，並且加入一個勾選框(checkbox)和一個刪除鈕:

imports/ui/task.html»

<template name="task">
  <li class="{{#if checked}}checked{{/if}}">
    <button class="delete">&times;</button>

    <input type="checkbox" checked="{{checked}}" class="toggle-checked" />

    <span class="text">{{text}}</span>
  </li>
</template>

同時把舊的task模板從imports/ui/body.html檔案中刪除。

再來加入一些事件處理器(event handlers)，來讓勾選框和刪除鈕產生作用:

imports/ui/task.js»

import { Template } from 'meteor/templating';
import { Tasks } from '../api/tasks.js';
import './task.html';

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

由於body模板使用到task模板，所以我們必須載入它:

imports/ui/body.js»

import { Tasks } from '../api/tasks.js';

import './task.js';
import './body.html';

Template.body.helpers({

透過事件處理器(event handler)取得資料

在事件處理器中，this代表個別的待辦事項物件。在集合(collection)中，每一個插入的文件(document)都有一個唯一的_id欄位，用來代表對應的文件。我們可以透過this._id得到該待辦事項的_id並且使用update或是remove來修改對應的待辦事項。

更新(Update)

update函數接受兩個參數。第一個參數為一個選擇器(selector) ，用來篩選符合條件的文件，第二個參數用來指定如何修改符合條件的集合。

以上的程式碼中，選擇器篩選出符合_id的待辦事項，然後使用$set來切換checked欄位，該欄位用來表示此待辦事項是否完成。

刪除(Remove)

remove函數接受一個選擇器(selector)的參數，用來篩選符合條件的文件，並且從集合中刪除。

使用物件屬性或是輔助器來新增或刪除class

加入以上的程式碼之後，試著勾選某個待辦事項，你會發現它被一條刪除線劃掉。這個效果透過以下的程式碼達成:

<li class="{{#if checked}}checked{{/if}}">

如果checked欄位是true， checked這個class就會被加到待辦事項清單的元素，利用這個class，我們就可以透過CSS來修改完成的待辦事項的樣式。