今回は、
テンプレート内のイベントを捕捉する
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メソッドは、
イベントマップのキーは、
イベント名[,イベント名...] セレクタ上のコードでは、
イベントハンドラとなる関数オブジェクトは、
上記のコードを実行すると、
サンプルは以下からダウンロードできます。
テンプレートの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という概念の理解が必要なので、 今回は説明しません。
テンプレートのインスタンスが持つメソッド
上で説明したメソッドは、
テンプレートのインスタンスは、
まず、
Template.mainContent.created = function() {
// thisが指すのはテンプレートのインスタンス
var template = this;
};また、
// イベントマップの登録
Template.mainContent.events({
// イベントハンドラの第二引数がtemplate
'click #greeting': function(event, template) {
...
}
});テンプレートのインスタンスは、
- findAll(selector)…セレクタを文字列で受け取り、
テンプレート内でマッチする要素を全て返します。 - find(selector)…セレクタを文字列で受け取り、
テンプレート内でマッチする要素をひとつ返します。存在しない場合はnullを返します。 - firstNode…テンプレート内の最初の要素を返します。
- lastNode…テンプレート内の最後の要素を返します。
- data…テンプレートが呼び出された際に渡されたデータを返します。
テンプレートインスタンスが持つAPIfind）
テキストフィールドとボタンが1つずつ記述された、
<head>
<title>サンプル6-2</title>
</head>
<body>
</body>
<template name="mainContent">
<input type="text">
<button id="greeting">クリック</button>
</template>ボタンがクリックされた際のイベントハンドラを、
Template.mainContent.events({
// Helloボタンのクリックイベント
'click #greeting': function(event, template) {
// type属性がtextであるinput要素を取得
var nameInput = template.find('input[type=text]');
var name = textInput.value;
alert('Hello, ' + name);
}
});イベントハンドラの第二引数に渡されたtemplateオブジェクトが持つ、findメソッドを使用して、find以外のメソッドも、firstNodeプロパティを使用してDOM要素を取得できます。
var nameInput = template.firstNode;
サンプルは以下からダウンロードできます。
まとめ
今回で、