体感!JavaScriptで超速アプリケーション開発 -Meteor完全解説

第6回 Meteorテンプレートをもっと活用する

この記事を読むのに必要な時間:およそ 2.5 分

今回は,テンプレートに関する残りの話題として,テンプレート内にイベントハンドラを登録する仕組みや,テンプレートに関するAPIを紹介します。

テンプレート内のイベントを捕捉する

Meteorのテンプレートシステムを使用すると,テンプレート内で発生したイベントを捕捉するようなコードも簡単に記述することができます。

たとえば,以下のようなHTMLコードがあるとします。<body>に埋め込まれるテンプレートの名称はmainContentで,その中にボタンが2つあります。ボタンのIDは「goodMorning」「hello」です。

<head>
  <title>サンプル6-1</title>
</head>
<body>
  
</body>
<template name="mainContent">
  <button id="goodMorning">Good Morning</button>
  <button id="hello">Hello</button>
</template>

これらのボタンがクリックされた時に処理を行うには,テンプレートmainContentが持つeventsメソッドを使用し,イベントを定義します。

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メソッドは,決められた形式のJavaScriptオブジェクト(イベントマップ)を引数にとります。イベントマップは文字列をキー,関数オブジェクトが値となります。

イベントマップのキーは,以下の形式に従った文字列です。

イベント名[,イベント名...] セレクタ

上のコードでは,"click #hello"は「#helloというIDの要素のクリックイベント」⁠"click button"は「button要素のクリックイベント」という意味になります。また,イベント名はカンマで区切って複数指定できます。

イベントハンドラとなる関数オブジェクトは,2つの引数をとります。1つ目はイベントオブジェクト,2つ目はテンプレートのインスタンスです。

上記のコードを実行すると,ボタンが2つ表示され,それらをクリックするとアラートが2回表示されます。これは,IDを対象としたイベントハンドラと,button要素を対象としたイベントハンドラのどちらも実行されているからです。

図1 サンプル6-1の実行結果(その1)

図1 サンプル6-1の実行結果(その1)

図2 サンプル6-1の実行結果(その2)

図2 サンプル6-1の実行結果(その2)

サンプルは以下からダウンロードできます。

テンプレートのAPI

<template>要素はMeteorによってコンパイルされ,グローバル変数Templateに関数オブジェクトとして登録されます第4回を参照)⁠その関数オブジェクトは,ただ実行することができる(実行するとテンプレートの評価結果が得られます)だけではなく,以下のようなAPIを備えています。

  • 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という概念の理解が必要なので,今回は説明しません。

著者プロフィール

白石俊平(しらいししゅんぺい)

株式会社オープンウェブ・テクノロジー代表取締役

HTML5開発者コミュニティhtml5j.org管理人

HTML5とか勉強会主催

Web先端技術味見部 部長

読書するエンジニアの会主催

しろうと哲学部 部長

Google API Expert(HTML5)

Microsoft Most Valuable Professional 2010, 2011(Internet Explorer)

コメント

コメントの記入