Meteorで初めてのコレクション更新と削除

本記事は公式チュートリアル5の内容に沿って説明するものです。

チュートリアルの目次

チェックボックスと削除ボタンを追加する

これまではデータ(ドキュメント)を追加するのみでしたが、今回は更新や削除を学びましょう。タスクのチェックボックスはそのタスクが完了したかどうかを意味します。

sample-app.htmlの中のtaskテンプレートを次のようにしましょう。

<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>

変更後のファイルは、こちらと同じになっているはずなので確認しましょう。

画面上にもチェックボックスとボタンが追加されていることを確認しましょう。meteorが既に起動されている必要があります。現時点ではこれらは機能しません。

チェックボックスと削除ボタンの処理を追加する

次にこれらの機能のイベント処理を追加しましょう。下記をsample-app.jsのif (Meteor.isClient) {}ブロック内に追加してください。

Template.task.events({
  "click .toggle-checked": function () {
    Tasks.update(this._id, {
      $set: {checked: ! this.checked}
    });
  },
  "click .delete": function () {
    Tasks.remove(this._id);
  }
});

変更後のファイルは、こちらと同じになっているはずです。ただし、コメント行は省略しています。

今回はtaskテンプレートにイベント処理を追加しました。対象がtaskテンプレートとなっているからです。2つともclickイベントでそれぞれclass名で対象を特定しています。それぞれの関数の中身を見ていきましょう。

まず、チェックボックス(.toggle-checked)の方は、Tasks.update()によってデータを更新しています。このとき、第一引数にidを渡し、第二引数にupdateオブジェクトを渡します。thisが分かりにくいですが、この関数が呼ばれた所でのtaskオブジェクトを指しています。ここでは、checkedというプロパティにチェックボックスの値を入れています。とても分かりにくいですが、this.checkedがチェックボックスの値で変更前のものを指します。updateに関する詳しいドュメントはこちらから。

次に、削除ボタン(.delete)の方は、Tasks.remove()によってデータを削除しています。引数にはidを渡しています。updateより簡単なので、updateが理解できていれば分かると思います。

Node.jsやMongoDBに慣れている方はcallbackがないことを不思議に思うかもしれませんが、実はcallbackを書くこともできます。しかし、通常はデータ(やコレクション)自体はリアクティブに更新されますので、callbackを使うのはエラー処理をする場合などに限られます。

実際の動作を確認する

上記2つの修正が完了したら動作するはずです。チェックボックスをチェックすると表示が変わるのが分かると思います(CSSが正しく設定できていれば)。これが表示上の変更だけでなく、mongoデータベースもちんと更新されていることを確認するため、ブラウザをリロードしてみてください。

削除ボタンも試してみてください。すぐ消えます。拡張としては確認ダイアログを出すなどが考えられますね。

checkedのクラス指定について補足

今回追加したHTMLに

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

というものがありますが、これはtaskオブジェクトのcheckedプロパティがtrueのときにcheckedクラスを設定するというものです。すなわち、

<li class="checked">

と同じになります。一つcheckedプロパティがfalseであったり、そもそもcheckedプロパティが存在しない場合は、

<li class="">

と同じになります。

確認項目

チェックボックスが表示されていること
削除ボタンが表示されていること
チェックボックスのイベントハンドラが登録されていること
削除ボタンのイベントハンドラが登録されていること
チェックボックスのイベントハンドラが動作すること
削除ボタンのイベントハンドラが動作すること

次のステップ

これでアプリの基本機能は完成です。次のステップでは、アプリをクラウドサーバにデプロイする方法を学びましょう。

Menu

Meteor Fan (日本語情報)

JavaScriptフレームワークMeteorに関していろいろ紹介する日本語情報サイト