Meteorで初めてのフォームとイベント処理

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

チュートリアルの目次

フォームを追加する

sample-app.htmlの中のheaderの中にフォームを追加しましょう。

<form class="new-task">
  <input type="text" name="text" placeholder="Type to add new tasks" />
</form>

HTMLの経験がある方は何の不自由もないと思います。class名がnew-taskになっていることに注意します。

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

画面上にもフォームが追加されていることを確認しましょう。meteorが既に起動されている必要があります。現時点ではフォームに入力しても何も起きません。

イベントの処理を追加する

次にフォームに入力した際のイベント処理を追加しましょう。フォームにテキストを入力してエンターキーを押すとsubmitイベントが発生します。下記をsample-app.jsのif (Meteor.isClient) {}ブロック内に追加してください。

Template.body.events({
  "submit .new-task": function (event) {
    event.preventDefault();
    var text = event.target.text.value;
    Tasks.insert({
      text: text,
      createdAt: new Date() // current time
    });
    event.target.text.value = "";
  }
});

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

bodyテンプレートのイベントリストに”submit .new-task”を定義しました。ここで定義した関数がフォームに入力してsubmitされた際に呼ばれます。フォームに入力した値は、event.target.text.valueで取得できます。ここで、textはフォームの<input>のname属性です。

mongoコレクションへの登録は、Tasks.insertを使います。今回の例では、textの他にcreatedAtもプロパティとして登録しています。mongoではこのように自由にデータ(ドキュメント)のプロパティを登録できます。

実際の動作を確認する

上記2つの修正が完了したら動作するはずです。表示部分はすでにこれまでのチュートリアルで作成したものでできています。

フォームにいろいろテキストを入力して登録してみましょう。すぐに反映されましたか。これもリアクティビティなのですが、難しい言葉を使わなくても直感的に理解できるかと思います。

タスクをソートする

現状では新しいタスクが順序的に下に表示されているはずです。せっかくなので新しいタスクが上に表示されるようにしましょう。

sample-app.jsの

return Tasks.find({});

を

return Tasks.find({}, {sort: {createdAt: -1}});

に変更してください。

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

このようにsortオプションを指定するとcreatedAtの逆順になります。-1を1にすると降順から昇順になります。

さらに新しいタスクを追加してみて一番上の順序に表示されることを確認しましょう。

確認項目

入力フォームが表示されていること
イベントハンドラが登録されていること
イベントハンドラが動作すること
タスクリストがソートされて表示されていること

次のステップ

今回はフォームとイベント処理を追加してUIからデータを入力することができました。次のステップではデータの修正と削除の方法を学びます。

Menu

Meteor Fan (日本語情報)

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