流星-ブレイズ

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);
   }
});

Meteor Blaze Render

データでレンダリング

リアクティブにデータを渡す必要がある場合は、 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);
   }
});

Meteor Blaze Render with Data

メソッドを削除

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

Meteor-blaze

流星-ブレイズ

レンダリング方法

meteorAppl

meteorApp.js

データでレンダリング

meteorAppl

meteorApp.js

メソッドを削除

meteorAppl

meteorApp.js

目次