今回は、テンプレートに関する残りの話題として、テンプレート内にイベントハンドラを登録する仕組みや、テンプレートに関するAPIを紹介します。
テンプレート内のイベントを捕捉する
Meteorのテンプレートシステムを使用すると、テンプレート内で発生したイベントを捕捉するようなコードも簡単に記述することができます。
たとえば、以下のようなHTMLコードがあるとします。<body>に埋め込まれるテンプレートの名称はmainContentで、その中にボタンが2つあります。ボタンのIDは「goodMorning」と「hello」です。
これらのボタンがクリックされた時に処理を行うには、テンプレートmainContentが持つeventsメソッドを使用し、イベントを定義します。
eventsメソッドは、決められた形式のJavaScriptオブジェクト(イベントマップ)を引数にとります。イベントマップは文字列をキー、関数オブジェクトが値となります。
イベントマップのキーは、以下の形式に従った文字列です。
上のコードでは、"click #hello"は「#helloというIDの要素のクリックイベント」、"click button"は「button要素のクリックイベント」という意味になります。また、イベント名はカンマで区切って複数指定できます。
イベントハンドラとなる関数オブジェクトは、2つの引数をとります。1つ目はイベントオブジェクト、2つ目はテンプレートのインスタンスです。
上記のコードを実行すると、ボタンが2つ表示され、それらをクリックするとアラートが2回表示されます。これは、IDを対象としたイベントハンドラと、button要素を対象としたイベントハンドラのどちらも実行されているからです。
サンプルは以下からダウンロードできます。
テンプレートのAPI
<template>要素はMeteorによってコンパイルされ、グローバル変数Template
に関数オブジェクトとして登録されます(第4回を参照)。その関数オブジェクトは、ただ実行することができる(実行するとテンプレートの評価結果が得られます)だけではなく、以下のようなAPIを備えています。
- rendered…テンプレートの実行結果がDOMに挿入される時呼び出されるイベントハンドラです。
- created…テンプレートが作成された時に呼び出されるイベントハンドラです。
- destroyed…テンプレートが破棄された時に呼び出されるイベントです。
これらのメソッドは、テンプレートに設定するイベントハンドラです。以下のように指定します。
また、以下のメソッドはすでに説明済み、もしくは次回以降に説明を行います。
- events(eventmap)…イベントマップを登録します(上記で説明済み)
- helpers(helpers)…ヘルパー関数を登録します(前回説明済み)
- preserve(selectors)…テンプレートの再レンダリングが行われた際、以前のDOMノードの状態を引き継ぎたい要素を、セレクタで指定します。テンプレートの再レンダリングについては、ライブHTMLという概念の理解が必要なので、今回は説明しません。
テンプレートのインスタンスが持つメソッド
上で説明したメソッドは、Meteorによって生成されたテンプレート関数が静的に持つAPIでした。ここでは、テンプレート「インスタンス」が持つAPIを説明します。
テンプレートのインスタンスは、以下の状況で利用できます。
まず、テンプレートのrendered、created、destroyedなどのイベントハンドラ内におけるthisオブジェクトは、テンプレートインスタンスを参照しています。
また、テンプレート内のUI要素から発生したイベントの、イベントハンドラの第二引数に渡されます。
テンプレートのインスタンスは、以下のようなAPIを備えています。
- findAll(selector)…セレクタを文字列で受け取り、テンプレート内でマッチする要素を全て返します。
- find(selector)…セレクタを文字列で受け取り、テンプレート内でマッチする要素をひとつ返します。存在しない場合はnullを返します。
- firstNode…テンプレート内の最初の要素を返します。
- lastNode…テンプレート内の最後の要素を返します。
- data…テンプレートが呼び出された際に渡されたデータを返します。
テンプレートインスタンスが持つAPI(ここではfind
)を使用する例を挙げます。
テキストフィールドとボタンが1つずつ記述された、以下のようなHTMLがあるとします。
ボタンがクリックされた際のイベントハンドラを、以下のように記述します。
イベントハンドラの第二引数に渡されたtemplateオブジェクトが持つ、find
メソッドを使用して、テキストフィールドのDOM要素を取得しています。find
以外のメソッドも、使い方は同様です。例えば、上記のテキストフィールドはテンプレート内で最初の要素なので、firstNode
プロパティを使用してDOM要素を取得できます。
サンプルは以下からダウンロードできます。
まとめ
今回で、Meteorのテンプレートシステムの解説は終わりとします。次回からはいよいよWebアプリケーションのキモとも言える、データベースについて見ていきたいと思います。