今回は，
テンプレート内のイベントを捕捉する
Meteorのテンプレートシステムを使用すると，
たとえば，
<head>
<title>サンプル6-1</title>
</head>
<body>
</body>
<template name="mainContent">
<button id="goodMorning">Good Morning</button>
<button id="hello">Hello</button>
</template>
これらのボタンがクリックされた時に処理を行うには，
Template.mainContent.events({
// Helloボタンのクリックイベント
'click #hello': function(event, template) {
alert('Hello');
},
// Good Morningボタンのクリックイベント
'click #goodMorning': function(event, template) {
alert('Good Morning');
},
// テンプレート内のボタンがクリックされたら呼び出される
'click button': function(event, template) {
alert('ボタンがクリックされました');
}
});
eventsメソッドは，
イベントマップのキーは，
イベント名[,イベント名...] セレクタ
上のコードでは，
イベントハンドラとなる関数オブジェクトは，
上記のコードを実行すると，
図1 サンプル6-1の実行結果
図2 サンプル6-1の実行結果
サンプルは以下からダウンロードできます。
テンプレートのAPI
<template>要素はMeteorによってコンパイルされ，Templateに関数オブジェクトとして登録されます
- rendered…テンプレートの実行結果がDOMに挿入される時呼び出されるイベントハンドラです。
- created…テンプレートが作成された時に呼び出されるイベントハンドラです。
- destroyed…テンプレートが破棄された時に呼び出されるイベントです。
これらのメソッドは，
Template.mainContent.created = function() {
console.log('created');
};
Template.mainContent.rendered = function() {
console.log('rendered');
};
Template.mainContent.destroyed = function() {
console.log('destroyed');
};
また，
- events(eventmap)…イベントマップを登録します
（上記で説明済み） - helpers(helpers)…ヘルパー関数を登録します
（前回説明済み） - preserve(selectors)…テンプレートの再レンダリングが行われた際，
以前のDOMノードの状態を引き継ぎたい要素を， セレクタで指定します。テンプレートの再レンダリングについては， ライブHTMLという概念の理解が必要なので， 今回は説明しません。