Meteorチュートリアル〜テンプレート〜

テンプレート

MeteorはHTMLファイルを解析し、\<head>、\<body>、および\<template>の3つのトップレベルタグを識別する

任意の\<head>タグ内のすべてがクライアントに送信されるHTMLのheadセクションに追加され、\<body>タグ内のすべてが通常のHTMLファイルと同様にbodyセクションに追加される
```
<head>
<title>simple</title>
</head>
```
\<template>タグ内はすべてMeteorテンプレートにコンパイルされるテンプレートは、{{> templateName}}を使ってHTML内に組み込むことも、Template.templateNameを使ってJavaScriptで参照することもできる
bodyセクションは、Template.bodyを使用してJavaScriptで参照できるそれを他の子テンプレートを含むことができる特殊な "親"テンプレートと考える

<body>
<div class="container">
    <header>
        <h1>Todo List</h1>
    </header>

    <ul>
        <!--tasksというリストの１つ１つの要素において-->
        {{#each tasks}}
            <!--taskって名前のところに飛ぶ↓-->
            {{> task}}
        {{/each}}

    </ul>
</div>
</body>

<template name="task">
    <li>{{text}}</li>
</template>

HTMLファイルのコードはすべて、Meteor'sSpacebarsコンパイラでコンパイルされる。スペースバーは、{{#each}}や{{#if}}のような二重中括弧で囲まれたステートメントを使用して、ビューにロジックとデータを追加できる

import { Template } from 'meteor/templating';

import './body.html';

Template.body.helpers({
  tasks: [
    { text: 'This is task 1' },
    { text: 'This is task 2' },
    { text: 'This is task 3' },
  ],
});

ヘルパーを定義することで、JavaScriptコードからテンプレートにデータを渡すことができる上記のコードでは、配列を返すTemplate.bodyのtasksというヘルパーを定義した。 HTMLのbodyタグの中で、{{#each tasks}}を使って配列を繰り返し処理し、各値のタスクテンプレートを挿入することができる。各ブロックの中で、{{text}}を使って各配列項目のtextプロパティを表示することができる

次のステップでは、データベースコレクションの中のダイナミックデータをテンプレートで表示するためにヘルパーを使う方法を学ぶ

canpaku / study_record

Meteorチュートリアル〜テンプレート〜 #4

テンプレート