JavaScript超初心者向け Meteor メモ (7) テンプレートを使ってみる
Meteor.jsは、 Webアプリづくりを楽しくする フレームワークです。
1.0が出たので
ちょっと触ってない間に1.0になってました。
正直忘れてる部分もある（！）ので、リハビリを兼ねてテンプレートの使い方を見てみようと思います。
おさらい。インストールとプロジェクト作成
毎回インストールの方法を書いているような。。w
「もう知ってるよ！」という方は読み飛ばしてください。
Meteorをまだインストールしてない場合、下記コマンドでインストールできます。(LinuxとMacのみ)
> curl https://install.meteor.com/ | sh
「昔インストールしたけど、忘れちゃったなぁ。」
という方は、
> meteor update
で、最新版にUpdateできます。（12/18現在 1.0.1でした。）
Meteorのインストールに成功したら、プロジェクトを作りましょう。
> meteor create test
これで、プロジェクトができます。
testフォルダの中に下記ファイルができていれば成功です。
- test.html
- test.css
- test.js
> cd test
> meteor
これで、実行できます。
ブラウザから、http://localhost:3000にアクセスしてみてください。
下記のような画面が出たら成功です。
テンプレートを使ってみる。
それでは、テンプレートを使ってみましょう〜！
{{text}} : 変数textに指定した文字を挿入してくれる
最初は、基本中の基本、文字列に置き換えるやつです。{は 2つ です。
html側に{{text}}を埋め込みます。（textの部分は変数名なので任意）
javascript側で変数textテキストを格納すると、その文字を表示してくれるというわけです。
下記のように使います。
<head><title>test</title></head>
<body>
{{textdata}}
</body>
if (Meteor.isClient) {
Template.body.textdata = "こんなんでいいのか〜？";
}
{{{html}}} : 変数htmlに指定したhtmlを挿入してくれる
次は、htmlのスニペットを挿入してくれるやつです。{は 3つ です。
html側に埋め込まれた{{{html}}}の部分に、javascript側でスニペットが挿入できます。
<head><title>test</title></head>
<body>
{{{htmldata}}}
</body>
if (Meteor.isClient) {
Template.body.htmldata = "<div>こんなんでいいのか〜？</div>";
}
こんな感じで使います。
{{> tname}} : <template name="tname">の内容を挿入してくれる
{{> tname}}のように書くと、htmlの<body>の外に書いた<template>タグの内容と差し替えてくれるようになります。
index.htmlとテンプレートのファイルを分けたい！といった時に使います。
<head><title>test</title></head>
<body>
{{> tname}}
</body>
<template name="tname">
こんなんでいいのか？
</template>
if (Meteor.isClient) {
}
※Meteorがmeteor createで最初に作るサンプルのように、ファイルを分けずにやってもいいです。
また、<template></template>の中でも先に出て来た{{text}}などを使うことができます。
bodyではなく<template></template>の中の{{text}}に値を指定するには、下記のようにテンプレート名を指定してください。
// <template name="tname"> 内の {{text}} に"ほげほげ"を指定するコード
Template.tname.text = "ほげほげ";
こんな感じになります。
<head><title>test</title></head>
<body>
{{> tname}}
</body>
tname.html`
<template name="tname">
{{text}}
</template>
if (Meteor.isClient) {
Template.tname.text = "ほげほげ";
}
{{#each arrayname}}〜{{/each}} : arraynameの要素の数だけ繰り返してくれる
繰り返してくれるやつです。
リスト表示とか作るときに便利です。
<head><title>test</title></head>
<body>
{{#each names}}
<li>{{name}}</li>
{{/each}}
</body>
if (Meteor.isClient) {
Template.body.names = [{name:"エカテリーナ"},{name:"ジョン"},{name:"いか太郎"}];
}
{{#if value}}〜{{else}}〜{{/if}} : valueで条件分岐！
条件分岐してくれるやつです。
<head><title>test</title></head>
<body>
{{#if value}}
<p>ON</p>
{{else}}
<p>OFF</p>
{{/if}}
</body>
if (Meteor.isClient) {
value = 1;
Template.body.helpers({
value:function(){
return Session.get("tt");
}
});
Template.body.events({
'click': function(){
console.log("click");
value ^= 1;
Session.set("tt",value);
}
});
}
いきなりめんどくさいコードになりました。。。
要は、Template.body.valueをtrueにしたらONと表示し、falseにしたらOFFと表示しているだけなのですが、イベントと絡めるとめんどくさく見えてしまいます。
Template.body.helpers()は、テンプレートに値を単純に設定する代わりに関数を設定したい場合に利用するものです。
以前はTemplate.body.value = function(){}; のような書き方も出来たのですが、推奨されなくなったようです。
また、「クリックするとON/OFFを切り替える」という動作をさせるために、クリックイベントの中で、Sessionという同期の仕組みも使っています。
まとめ：参考リンクなど
Meteorのテンプレートの基本的な部分だけを見てみました。
まだまだ知りたいぞ！という方は、下記も合わせてみてください。
- Meteor Tutorial (2) Defining views with templates: テンプレートの使い方
- Spacebars (github):テンプレートの書式についての解説をどうぞ〜！
- Meteor Documentation (Templates):テンプレート操作するAPIについての解説
それでは〜
バックナンバー
下記もよろしくお願いします！
JavaScript超初心者向け Meteor メモ (1)
JavaScript超初心者向け Meteor メモ (2) v0.8.0でのテンプレートエンジンの変更について
JavaScript超初心者向け Meteor メモ (3) シンプルなチャットを作ってみる
JavaScript超初心者向け Meteor メモ (4) ログイン画面を作る （基本編）
JavaScript超初心者向け Meteor メモ (5) ログイン画面を作る （Google/Twitterアカウント編）
JavaScript超初心者向け Meteor メモ (6) 外部パッケージを使ってみる