這種方法被用于繪制模板到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ù),你可以使用 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。
|