Meteor Blaze
這種方法被用於繪制模板到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。
|
Meteor Blaze