鍍金池/ 教程/ HTML/ Meteor Blaze
Meteor結構
Meteor部署
Meteor排序
Meteor事件
Meteor Blaze
Meteor第一個應用程序
Meteor發(fā)布和訂閱
Meteor環(huán)境安裝配置
Meteor package.js
Meteor在手機上運行
Meteor集合
Meteor模板
Meteor跟蹤器
Meteor發(fā)送郵件
Meteor計時器
Meteor ToDo App實例
Meteor軟件包管理
Meteor方法
Meteor表單
Meteor Assets資源
Meteor會話
Meteor EJSON
Meteor http
Meteor安全
Meteor核心API
Meteor check
Meteor帳號
Meteor教程

Meteor Blaze

Blaze是Meteor 軟件包用于構建現(xiàn)場反應模板。

Render方法

這種方法被用于繪制模板到DOM。首先,我們將創(chuàng)建 myNewTemplate 之后渲染。 我們增加 myContainer 這將用來作為父元素的容器,所以render方法知道在何處呈現(xiàn)我們的模板。

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> 

下一步,我們將創(chuàng)建渲染功能這將需要兩個參數(shù)。第一個是將要渲染的模板,第二個是,我們上面提到的父元素。

meteorApp/client/app.js

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

渲染數(shù)據(jù)

如果需要被動地傳遞一些數(shù)據(jù),你可以使用 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方法的第二個參數(shù)添加數(shù)據(jù)。其它兩個參數(shù)和之前的實例相同,在這個例子中我們的數(shù)據(jù)將用于記錄一些文本的功能。

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])

用于從渲染元素檢索數(shù)據(jù)。
2

Blaze.toHTML(templateOrView)

用于渲染模板或視圖字符串。
3

Blaze.toHTMLWithData(templateOrView, data)

用于渲染模板或視圖字符串附加數(shù)據(jù)。
4

new Blaze.View([name], renderFunction)

用于創(chuàng)建新 Blaze 反應性的DOM部分。 

5

Blaze.currentView

用于獲取當前視圖。
6

Blaze.getView([element])

用于獲取當前視圖。
7

Blaze.With(data, contentFunc)

用于構造呈現(xiàn)一些內容與上下文的視圖。
8

Blaze.If(conditionFunc, contentFunc, [elseFunc])

用于構造呈現(xiàn)一些有條件的內容的視圖。
9

Blaze.Unless(conditionFunc, contentFunc, [elseFunc])

用于構造呈現(xiàn)一些有條件的內容(反轉Blaze.if)的視圖。
10

Blaze.Each(argFunc, contentFunc, [elseFunc])

用于構建為每個項目呈現(xiàn) contentFunct 的視圖。

11

new Blaze.Template([viewName], renderFunction)

使用名稱和內容構建新的Blaze視圖。
12

Blaze.isTemplate(value)

如果值是一個模板對象則返回true。