本文源代码可以在这里找到

如果你有成为全栈的梦想，METEOR是个不错的平台。

5.检查任务和删除任务

到目前为止，我们还仅仅只能插入文档。现在，我们将学习怎么去更新和删除它们。

让我们添加两个新元素到我们的组件，一个复选框和一个删除按钮，以及它们对应的时间管理器：

  1. import React, { Component, PropTypes } from 'react';
  3. import { Tasks } from '../api/tasks.js';
  5. // Task component - represents a single todo item
  6. export default class Task extends Component {
  7.   toggleChecked() {
  8.     // Set the checked property to the opposite of its current value
  9.     Tasks.update(this.props.task._id, {
  10.       $set: { checked: !this.props.task.checked },
  11.     });
  12.   }
  14.   deleteThisTask() {
  15.     Tasks.remove(this.props.task._id);
  16.   }
  18.   render() {
  19.     // Give tasks a different className when they are checked off,
  20.     // so that we can style them nicely in CSS
  21.     const taskClassName = this.props.task.checked ? 'checked' : '';
  23.     return (
  24.       <li className={taskClassName}>
  25.         <button className="delete" onClick={this.deleteThisTask.bind(this)}>
  26.           &times;
  27.         </button>
  29.         <input
  30.           type="checkbox"
  31.           readOnly
  32.           checked={this.props.task.checked}
  33.           onClick={this.toggleChecked.bind(this)}
  34.         />
  36.         <span className="text">{this.props.task.text}</span>
  37.       </li>
  38.     );
  39.   }
  40. }

更新

在上面代码中，我们调用Tasks.update去检查一个任务。

集合上的更新功能需要两个参数。第一个参数是标识集合子集的选择器，第二个是一个update参数，用来指定要对匹配对象做什么。

在这个例子中，选择器就是相对应的任务的_id，update参数用$set去切换checked字段，这将代表任务是否已经完成。

删除

上面代码使用Tasks.remove去删除任务。remove函数只需要一个参数，一个选择器，用于确定要在集合中删除的项目。

上一节：Forms and events(表单和事件)

下一节：Running on mobile(在移动端运行)