体感!JavaScriptで超速アプリケーション開発 -Meteor完全解説
第4回 Meteor開発のテンプレート
Meteorを使用したアプリケーション開発
前回までは,
UIプログラミングを行う際,
Meteor自身は,
前置きが長くなってしまいましたが,
Meteorにおけるテンプレートシステム
前述した文章で,
Handlebarsそのものについては,
まず,<template>
要素を配置します。これは,
MeteorにおけるHTMLのアウトライン
<head> </head>
<body> </body>
<template>テンプレート1</template>
<template>テンプレート2</template>
そして,<template>
内にテンプレートのソースコードを記述します。テンプレートには名前が必要で,
<template name="template1">
<h1>はじめてのテンプレート</h1>
</template>
このテンプレートを<body>
要素内に展開するために,{{> テンプレート名}}
という記述を行います。
<body>
{{>template1}}
</body>
ここまでのソースコード全文は以下のようになります。
<head>
<meta charset="UTF-8">
<title>サンプル4-1</title>
</head>
<body>
{{>template1}}
</body>
<template name="template1">
<h1>はじめてのテンプレート</h1>
</template>
この例
サンプルは以下からダウンロードできます。
Meteorによるテンプレートの展開
Meteorは<template>
要素によって定義されたテンプレートを,
コンパイルされた結果,Template
オブジェクトのメンバーとして定義されます。その関数に対しては,Template.テンプレート名
でアクセスすることが可能です。
たとえば,Template.
という関数が定義されます。サンプル4-1を実行中に,Template.
を呼び出してみましょう。
上の実行結果を見てお分かりの通り,
簡潔に言えば,Template.テンプレート名
という関数になる」
Handlebarsテンプレート内で変数を使用する
Handlebarsは,{{
と}}
で囲んだ中で任意の式を使用することができます。最も一般的なのは,
<template name="mainContent">
こんにちは{{yourName}}さん。現在時刻は{{now}}です。
</template>
このテンプレート中で使用されている変数に値を指定する方法は3つあります。テンプレート関数を直接呼び出す方法,
まず,Template.
として定義されていますので,
// テンプレートを評価
var content = Template.mainContent({ yourName: "白石", now: new Date });
// 評価結果をbody要素の内容として指定
document.body.innerHTML = content;
この方法は,
// 変数yourNameに対応する定数
Template.mainContent.yourName = "白石";
// 変数nowに対応する定数
Template.mainContent.now = new Date;
さらに,
// 変数yourNameに対応する定数
Template.mainContent.yourName = function() {
return "白石";
};
// 変数nowに対応する定数
Template.mainContent.now = function() {
return new Date;
};
まとめ
今回は,<template>
要素を用いてテンプレートの定義を行えること,Template
オブジェクトの属性として定義されること,
次回は,