サーチ…
前書き
Blazeは、ダイナミックでリアクティブなHTMLテンプレートを作成してユーザーインターフェイスを作成する強力なライブラリです。 Blazeテンプレートを使用すると、ループや条件付きロジックをHTMLマークアップで直接使用できます。このセクションでは、Blazeを使用したMeteor.jsでのテンプレートの適切な使用方法について説明します。
メソッド呼び出しからテンプレートを生成する
<template name="myTemplate">
{{#each results}}
<div><span>{{name}}</span><span>{{age}}</span></div>
{{/each}}
</template>
Template.myTemplate.onCreated(function() {
this.results = new ReactiveVar();
Meteor.call('myMethod', (error, result) => {
if (error) {
// do something with the error
} else {
// results is an array of {name, age} objects
this.results.set(result);
}
});
});
Template.myTemplate.helpers({
results() {
return Template.instance().results.get();
}
});
テンプレートのデータコンテキスト
テンプレートが呼び出されるたびに、テンプレートのデフォルトのデータコンテキストが呼び出し側から暗黙的に取得されます。たとえば、childTemplateはparentTemplateのデータコンテキスト、つまり呼び出し元テンプレートを取得します
<template name="parentTemplate">
{{#with someHelperGettingDataForParentTemplate}}
<h1>My name is {{firstname}} {{lastname}}</h1>
//some stuffs here
{{> childTemplate}}
{{/with}}
</template>
上記の状況では、ヘルパーが親テンプレートのために抽出するデータは、childTemplateによって自動的に取得されます。たとえば、{{firstname}}と{{lastname}}はchildTemplateからアクセスできます。
<template name="childTemplate">
<h2>My name is also {{firstname}} {{lastname}}</h2>
</template>
下の例のように引数をテンプレートに渡すことで、childTemplateのデータコンテキストを明示的に定義することさえできます。
<template name="parentTemplate">
{{#with someHelperGettingDataForParentTemplate}}
<h1>My name is {{firstname}} {{lastname}}</h1>
//some stuffs here
{{> childTemplate childData=someHeplerReturningDataForChild}}
{{/with}}
</template>
ヘルパーsomeHelperReturningDataForChildが{profession： "Meteor Developer"、hobby： "stackoverflowing"}のようなオブジェクトを返すと仮定すると、この特定のオブジェクトはchildTemplateの明示的なデータコンテキストになります。子テンプレートで、次のようなことができます
<template name="childTemplate">
<h2>My profession is {{profession}}</h2>
<h3>My hobby is {{hobby}}</h3>
</template>
テンプレートヘルパー
テンプレートヘルパーは、Blazeの重要な部分であり、ビジネスロジックと反応性の両方をテンプレートに提供します。テンプレートヘルパーは、実際には依存関係が変わるたびに再実行される反作用計算であることを覚えておくことが重要です。ニーズに応じて、テンプレートヘルパーは、グローバルに定義することも、特定のテンプレートにスコープを設定することもできます。各テンプレートヘルパー定義アプローチの例を以下に示す。
- 単一のテンプレートにスコープされたテンプレートヘルパーの例。
最初にテンプレートを定義します。
<template name="welcomeMessage">
<h1>Welcome back {{fullName}}</h1>
</template>
次に、テンプレートヘルパーを定義します。これは、テンプレートのデータコンテキストにfirstNameおよびlastNameプロパティが含まれていることを前提としています。
Template.welcomeMessage.helpers({
fullName: function() {
const instance = Template.instance();
return instance.data.firstName + ' ' + instance.data.lastName
},
});
- グローバルなテンプレートヘルパーの例（このヘルパーはどのテンプレートでも使用できます）
最初にヘルパーを登録してください：
Template.registerHelper('equals', function(item1, item2) {
if (!item1 || !item2) {
return false;
}
return item1 === item2;
});
equalsヘルパーが定義されているので、どのテンプレートでも使用できます。
<template name="registration">
{{#if equals currentUser.registrationStatus 'Pending'}}
<p>Don't forget to complete your registration!<p>
{{/if}}
</template>