初めてのMeteor Spacebarsでテンプレート

本記事は公式チュートリアル2の内容に沿って説明するものです。

チュートリアルの目次

初めてのMeteorアプリ作成
初めてのMeteor Spacebarsでテンプレート (←今ここ)

まだ序盤です。

テンプレート機能

初めにsample-app.htmlの中身を次のようにしましょう。
既に書いてあるHTMLは消して、すべて置き換えて構いません。

<head>
  <title>Todo List</title>
</head>
<body>
  <div class="container">
    <header>
      <h1>Todo List</h1>
    </header>
    <ul>
      {{#each tasks}}
        {{> task}}
      {{/each}}
    </ul>
  </div>
</body>
<template name="task">
  <li>{{text}}</li>
</template>

こちらを参照しても同じものが見えます。

ここでの一つ目のポイントは最後の<template>です。このようにHTMLの一部分をテンプレートとして<body>の外に定義することができます。テンプレートを呼び出す際は、{{> task}}のようにします。

次に、{{#each}}です。これは、tasksという配列について繰り返すという処理です。tasksの一つひとつをテンプレート展開することになります。テンプレートには{{text}}と記述されており、これが tasksの一つに設定されている(はずの)プロパティを表示することになります。

tasksの定義

今度は、sample-app.jsを次のように置き換えてください。

if (Meteor.isClient) {
  // This code only runs on the client
  Template.body.helpers({
    tasks: [
      { text: "This is task 1" },
      { text: "This is task 2" },
      { text: "This is task 3" }
    ]
  });
}

こちらに同じものがあります。

これにより<body>でtasksが定義されます。tasksは3つのオブジェクトを含む配列で、それぞれのオブジェクトにはtextプロパティが設定されています。

さて、これまでに編集した2つのファイルを保存して、ブラウザを見ると、ホットコードプッシュが効いて画面が更新されているはずです。3つのタスクが表示されていれば成功です。

細かい定義は今後学んでいくとしても、とりあえずは全体像を把握して、なぜこのような結果になるのか分かるようにしておきましょう。

Spacebarsの概略

今回、<template>や{{#each}}などの機能を実現しているのがSpacebarsです。これはHandlebarsをもとにしています。

{{#each}}の他にも{{#if}}などが使えます。詳しくは、こちらのドキュメント(英語)を参照するとよいでしょう。

cssの準備

現状でも機能は問題なく動きますが、より見栄えをよくしてチュートリアルを楽しむために、cssファイルを設置しておきましょう。下記の内容でsample-app.cssの内容を置き換えてください。

長いので直接こちらを参照するか、ダウンロードしましょう。

cssに慣れていない人は現時点では詳しく読む必要はありません。

修正が終わってファイルを保存したら、ブラウザを見てみましょう。ホットコードプッシュされていれば、なにもしなくてもcssが適用されて、画面がきれいになっていると思います。

確認項目

タスクが3つ定義されていること
タスクが3つ表示されていること

次のステップ

今回はtasksの中身はダミーデータでしたが、これをちゃんとデータベースと連携するようにすることが次のステップです。

Menu

Meteor Fan (日本語情報)

JavaScriptフレームワークMeteorに関していろいろ紹介する日本語情報サイト