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。
|