Meteor-templates
提供：Dev Guides
流星-テンプレート
Meteorテンプレートは、3つの最上位タグを使用しています。 最初の2つは head と body です。 これらのタグは、通常のHTMLと同じ機能を実行します。 3番目のタグは template です。 これは、HTMLをJavaScriptに接続する場所です。
シンプルなテンプレート
次の例は、これがどのように機能するかを示しています。 name = "myParagraph" 属性を持つテンプレートを作成しています。 template タグは body 要素の下に作成されますが、画面にレンダリングする前に含める必要があります。 \ {\ {> myParagraph}} 構文を使用してそれを行うことができます。 このテンプレートでは、二重中括弧*（\ {\ {text}}）を使用しています。 これは *Spacebars と呼ばれる流星テンプレート言語です。
JavaScriptファイルでは、テンプレートへの接続となる* Template.myParagraph.helpers（\ {}）メソッドを設定しています。 この例では、 *text ヘルパーのみを使用しています。
meteorAppl
<head>
<title>meteorApp</title>
</head>
<body>
<h1>Header</h1>
{{> myParagraph}}
</body>
<template name = "myParagraph">
<p>{{text}}</p>
</template>meteorApp.js
if (Meteor.isClient) {
//This code only runs on the client
Template.myParagraph.helpers({
text: 'This is paragraph...'
});
}変更を保存した後、出力は次のようになります-
ブロックテンプレート
次の例では、 \ {\ {＃each paragraphs}} を使用して paragraphs 配列を反復処理し、各値に対してテンプレート name = "paragraph" を返します。
meteorAppl
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{#each paragraphs}}
{{> paragraph}}
{{/each}}
</div>
</body>
<template name = "paragraph">
<p>{{text}}</p>
</template>- 段落*ヘルパーを作成する必要があります。 これは、5つのテキスト値を持つ配列になります。
meteorApp.js
if (Meteor.isClient) {
//This code only runs on the client
Template.body.helpers({
paragraphs: [
{ text: "This is paragraph 1..." },
{ text: "This is paragraph 2..." },
{ text: "This is paragraph 3..." },
{ text: "This is paragraph 4..." },
{ text: "This is paragraph 5..." }
]
});
}これで、画面に5つの段落が表示されます。
