Meteorの日本語版のチュートリアルのstep05です。

目次

1. 最初のアプリを作成する
2. Reactコンポーネントでビューを定義する
3. コレクションにタスクを格納する
4. フォームを使ってタスクを追加する
5. タスクにチェックマークをつける・削除する (本記事)
6. アプリをAndroidやiOSで動かす
7. 一時的なUIデータをステートに格納する
8. ユーザアカウントを追加する
9. メソッドによるセキュリティ
10. パブリッシュとサブスクライブによるデータフィルタリング
11. テストについて
12. その後の学習法について

タスクにチェックマークをつける・削除する

これまでは、コレクションに対してデータの追加しかしてきませんでした。ここでは、データの更新と削除について学びます。

taskコンポーネントに2つの要素を追加しましょう。チェックボックスと削除ボタンです。それぞれイベントハンドラも設定します。imports/ui/Task.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。

更新

上記のコードでは、Tasks.updateを呼び出してチェックマークをつけます。

コレクションのupdate関数は2つの引数をとります。1つ目はコレクションのサブセットを特定するためのセレクタで、2つ目は該当するオブジェクトをどう変更するかを示すアップデートパラメータです。

今回の例では、セレクタは単に対象タスクの_idです。アップデートパラメータは$setを用いてcheckedフィールドをトグル変換しています。checkedフィールドがタスクが完了しているかを表しています。

削除

上記のコードでは、Tasks.removeを使ってタスクを削除しています。remove関数は1つの引数をとり、コレクションから削除するドキュメントを決めるためのセレクタを指定します。

次のステップへ

step06: アプリをAndroidやiOSで動かす