流星-ブレイズ
Blazeは、ライブリアクティブテンプレートを構築するためのMeteorパッケージです。
レンダリング方法
このメソッドは、テンプレートをDOMにレンダリングするために使用されます。まず、作成しますmyNewTemplateそれがレンダリングされます。また、追加しますmyContainer、これは親要素として使用されるため、 render メソッドは、テンプレートをレンダリングする場所を認識しています。
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div id = "myContainer">
</div>
</body>
<template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>
次に、2つの引数を取るレンダリング関数を作成します。1つ目はレンダリングされるテンプレートで、2つ目は前述の親要素です。
meteorApp.js
Meteor.startup(function () {
if(Meteor.isClient) {
var myNewTemplate = Template.myNewTemplate;
var myContainer = document.getElementById('myContainer');
Blaze.render(myNewTemplate, myContainer);
}
});
データを使用してレンダリング
一部のデータを事後対応的に渡す必要がある場合は、次を使用できます renderWithData方法。HTMLは、前の例とまったく同じになります。
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div id = "myContainer">
</div>
</body>
<template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>
の2番目の引数としてデータを追加できます Meteor.renderWithData方法。他の2つの引数は、前の例と同じです。この例では、データはテキストをログに記録する関数です。
meteorApp.js
Meteor.startup(function () {
if(Meteor.isClient) {
var myNewTemplate = Template.myNewTemplate;
var myData = function() {
console.log('Log from the data object...')
}
var myContainer = document.getElementById('myContainer');
Blaze.renderWithData(myNewTemplate, myData, myContainer);
}
});
メソッドの削除
追加できます remove 方法。
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div id = "myContainer">
</div>
</body>
<template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>
この例では、3秒後に削除されるテンプレートをレンダリングしています。に注意してくださいBlaze.Remove テンプレートを削除するために使用しているメソッド。
meteorApp.js
Meteor.startup(function () {
if(Meteor.isClient) {
var myNewTemplate = Template.myNewTemplate;
var myContainer = document.getElementById('myContainer');
var myRenderedTemplate = Blaze.render(myNewTemplate, myContainer);
Meteor.setTimeout(function() {
Blaze.remove(myRenderedTemplate);
}, 3000);
}
});
次の表に、使用できるその他の方法を示します。
シニア番号 | 方法と詳細 |
---|---|
1 | Blaze.getData([elementOrView]) レンダリング要素からデータを取得するために使用されます。 |
2 | Blaze.toHTML(templateOrView) テンプレートまたはビューを文字列にレンダリングするために使用されます。 |
3 | Blaze.toHTMLWithData(templateOrView, data) 追加データを含む文字列にテンプレートまたはビューをレンダリングするために使用されます。 |
4 | new Blaze.View([name], renderFunction) DOMの新しいBlazeリアクティブ部分を作成するために使用されます。 |
5 | Blaze.currentView 現在のビューを取得するために使用されます。 |
6 | Blaze.getView([element]) 現在のビューを取得するために使用されます。 |
7 | Blaze.With(data, contentFunc) 一部のコンテンツをコンテキストでレンダリングするビューを構築するために使用されます。 |
8 | Blaze.If(conditionFunc, contentFunc, [elseFunc]) 一部の条件付きコンテンツをレンダリングするビューを構築するために使用されます。 |
9 | Blaze.Unless(conditionFunc, contentFunc, [elseFunc]) 一部の条件付きコンテンツをレンダリングするビューを構築するために使用されます(反転 Blaze.if)。 |
10 | Blaze.Each(argFunc, contentFunc, [elseFunc]) レンダリングするビューを構築するために使用されます contentFunct すべてのアイテムに対して。 |
11 | new Blaze.Template([viewName], renderFunction) 名前とコンテンツを使用して新しいBlazeビューを作成するために使用されます。 |
12 | Blaze.isTemplate(value) 値がテンプレートオブジェクトの場合、trueを返すために使用されます。 |