Meteor - Blaze

Blaze 是一个用于构建实时响应式模板的 Meteor 包。

渲染方法

此方法用于将模板渲染到 DOM 中。首先，我们将创建 **myNewTemplate**，它将被渲染。我们还将添加 **myContainer**，它将用作父元素，因此 **render** 方法知道在哪里渲染我们的模板。

meteorApp.html

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

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

接下来，我们将创建一个渲染函数，它将接受两个参数。第一个是要渲染的模板，第二个是我们上面提到的父元素。

meteorApp.js

Meteor.startup(function () {

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

带数据的渲染

如果您需要以响应方式传递一些数据，可以使用 **renderWithData** 方法。HTML 将与上一示例完全相同。

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

下表显示了可以使用的其他方法。

序号	方法及详情
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，如果值为模板对象。

打印页面