流星-ブレイズ

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を返すために使用されます。