Meteor Blaze - tw511教學網

Blaze是Meteor 軟體包用於構建現場反應模板。

Render方法

這種方法被用於繪製模板到DOM。首先，我們將建立 myNewTemplate 之後渲染。我們增加 myContainer 這將用來作為父元素的容器，所以render方法知道在何處呈現我們的模板。

meteorApp/client/app.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div id = "myContainer">
   </div>
</body>

<template name = "myNewTemplate">
   <p>Text from my new template...</p>
</template>

下一步，我們將建立渲染功能這將需要兩個引數。第一個是將要渲染的模板，第二個是，我們上面提到的父元素。

meteorApp/client/app.js

Meteor.startup(function () {
   if(Meteor.isClient) {
      var myNewTemplate = Template.myNewTemplate;
      var myContainer = document.getElementById('myContainer');
      Blaze.render(myNewTemplate, myContainer);
   }
});

渲染資料

如果需要被動地傳遞一些資料，你可以使用 renderWithData 方法。 HTML和前面的例子完全相同。

meteorApp/client/app.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div id = "myContainer">
   </div>
</body>

<template name = "myNewTemplate">
   <p>Text from my new template...</p>
</template>

我們可以在Meteor.renderWithData方法的第二個引數新增資料。其它兩個引數和之前的範例相同，在這個例子中我們的資料將用於記錄一些文字的功能。

meteorApp/client/app.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/client/app.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div id = "myContainer">
   </div>
</body>

<template name = "myNewTemplate">
   <p>Text from my new template...</p>
</template>

在這個例子中，我們將在三秒鐘後移除模板。請注意，我們使用 Blaze.Remove方法除去模板。

meteorApp/client/app.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);
   }
});

下表顯示了可使用的其他方法。

S.No.	方法與細則
1	Blaze.getData([elementOrView]) 用於從渲染元素檢索資料。
2	Blaze.toHTML(templateOrView) 用於渲染模板或檢視字串。
3	Blaze.toHTMLWithData(templateOrView, data) 用於渲染模板或檢視字串附加資料。
4	new Blaze.View([name], renderFunction) 用於建立新 Blaze 反應性的DOM部分。
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。