Meteorチュートリアル〜フォームとイベント〜

フォームからタスクを追加

//imports/ui/body.html
<body>
<div class="container">
    <header>
        <h1>Todo List</h1>

        <!--入力フォーム-->
        <form class="new-task">
            <input type="text" name="text" placeholder="Type to add new tasks" />
        </form>
    </header>

~省略~

</div>
</body>

//body.js

//入力フォームに入力されたときの行動
Template.body.events({
    'submit .new-task'(event) {
        // Prevent default browser form submit
        event.preventDefault();

        // Get value from form element
        const target = event.target;
        const text = target.text.value;

        // Insert a task into the collection
        Tasks.insert({
            text,
            createdAt: new Date(), // current time
        });

        // Clear form
        target.text.value = '';
    },
});

イベントリスナーは、ヘルパーと同じようにテンプレートにある。 Template.templateName.events（...）を呼び出す。キーはリッスンするイベントを記述し、値はイベントが発生したときに呼び出されるイベントハンドラを記述する。 ↑では、CSSセレクタ.new-taskと一致する要素のsubmitイベントを待ち受けている。このイベントが、ユーザーが入力フィールド内でEnterキーを押すことによってトリガーされると、イベントハンドラー関数が呼び出される

イベントハンドラは、トリガされたイベントに関する情報を持つeventという引数を取得する。この場合、event.targetはフォーム要素であり、event.target.text.valueを使用して入力値を取得できる。 console.log（イベント）を追加し、ブラウザコンソールでオブジェクトを検査することで、イベントオブジェクトの他のすべてのプロパティを見ることができる最後に、イベントハンドラの最後の行で、別の新しいタスクを準備するために入力をクリアする

イベントハンドラの内部では、Tasks.insert（）を呼び出してタスクコレクションにタスクを追加する。作成された時間などのタスクオブジェクトには、コレクションのスキーマを定義する必要がないため、プロパティを割り当てることができる。（クライアントからデータベースに何かを挿入できることはあまり安全ではないが、今はきにしない。ステップ10でアプリケーションのセキュリティを確保し、データをデータベースに挿入する方法を制限する方法を学習する）

現時点でこのコードは新しいタスクをリストの一番下に表示するが、最新のタスクを最初に見たいので、これはタスクリストにはあまり適していない。 createdAtフィールドを使用して結果をソートすることで、これを解決できる。タスクヘルパーの中のfind呼び出しにこうやってソートオプションを追加するだけ：

//body.js
Template.body.helpers({
    tasks() {
        //↓ソートされないバージョン
        //return Tasks.find({});

        // Show newest tasks at the top
        return Tasks.find({}, { sort: { createdAt: -1 } });
    },
});

[次のステップ]()では、タスクをチェックしたり削除したりする、タスクリスト機能を追加する。

canpaku / study_record

Meteorチュートリアル〜フォームとイベント〜 #6

フォームからタスクを追加