Meteor-blaze
流星-ブレイズ
Blazeは、ライブリアクティブテンプレートを構築するためのMeteorパッケージです。
レンダリング方法
このメソッドは、テンプレートをDOMにレンダリングするために使用されます。 最初に、レンダリングされる myNewTemplate を作成します。 また、親要素として使用される myContainer を追加するため、 render メソッドはテンプレートをレンダリングする場所を認識します。
meteorAppl
<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は前の例とまったく同じです。
meteorAppl
<head>
<title>meteorApp</title>
</head>
<body>
<div id = "myContainer">
</div>
</body>
<template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>*Meteor.renderWithData* メソッドの2番目の引数としてデータを追加できます。 他の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* メソッドを追加できます。meteorAppl
<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);
}
});次の表は、使用可能な他の方法を示しています。
| Sr.No. | Method & Details |
|---|---|
| 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を返すために使用されます。 |
