MeteorのTutorialを試してみる（２

前回に引き続き、MeteorのTutorialに挑戦していきます。
今回はタスク入力フォームの作成までです。

Adding tasks with a form

前回は直接DBに書き込みましたが、ユーザがタスクを追加できるようUIにフォームを追加しましょう。
Bodyタグ内のheaderを次のように変更します。

simple-todos.html

・・・
    <header>
      <h1>Todo List</h1>
        <form class="new-task">
          <input type="text" name="text" placeholder="Type to add new tasks" />
        </form>
    </header>
・・・

そうすると画面が次のようになります。

この例ではinputに文字列を打ち込みエンターを押すとsubmitが発生します。submitを受け取り、DBを更新しましょう。
simple-todos.jsのTemplate.body.helpersセクションの後に次のコードを記述します。

simple-todos.js

・・・
  Template.body.events({
    "submit .new-task": function (event) {
      // This function is called when the new task form is submitted

      var text = event.target.text.value;

      Tasks.insert({
        text: text,
        createdAt: new Date() // current time
      });

      // Clear form
      event.target.text.value = "";

      // Prevent default form submit
      return false;
    }
  });
・・・

とりあえず動作を確認しましょう。適当に入力して反映されることを確認してください。また画面を２つ開くと同期されていることがわかると思います。

Attaching events to templates

ではコードの解説に移りましょう。
ヘルパーと同じような感じでTemplate.body.events()を使ってイベントリスナーも定義することができます。今回の例では.new-taskクラスをもつフォームからのsubmitイベントに対してリスナーを定義しています。
リスナーは引数としてeventを取得できます。
入力フォームはevent.targetで取得でき、そのinputはevent.target.textで取得できます。

Inserting into a collection

DBへの値の登録はTasks.insert()で行います。この際、現在日時をフィールドとして追加しています。このように、好きにフィールドを追加することができます。
しかし、クライアントサイドから好きにデータを書き込めるのはセキュリティ上よくありません。今はこのままにしておきますが、後の章で制限を設けます。

Sorting our tasks

現在、タスクリストが登録順に並んでいますが、新しいものが先にくるようソーティングを見直します。
そのためにヘルパのfindにソーティングオプションを追加します。

simple-todo.js

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

切りがいいので一端きります。
このあたりでCloud9のワークスペースがメモリ不足になりました。ローカルでやったほうがいいかもしれませんね・・・
次回