Meteor Blaze

時間 2019-11-16

標籤 meteor blaze 简体版

原文原文鏈接

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

Render方法

這種方法被用於繪製模板到DOM。首先，咱們將建立 myNewTemplate 以後渲染。咱們增長 myContainer 這將用來做爲父元素的容器，因此render方法知道在何處呈現咱們的模板。html

meteorApp/client/app.htmlapp

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

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

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

meteorApp/client/app.jsspa

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

渲染數據

若是須要被動地傳遞一些數據，你能夠使用 renderWithData 方法。 HTML和前面的例子徹底相同。htm

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方法的第二個參數添加數據。其它兩個參數和以前的實例相同，在這個例子中咱們的數據將用於記錄一些文本的功能。ci

meteorApp/client/app.jselement

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);
   }
	
});

刪除方法

咱們能夠添加 removerem

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。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。