关注我们

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>

接下来，无涯教程将创建一个带有两个参数的render函数。第一个是将要呈现的模板，第二个是无涯教程上面提到的父元素。

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

删除方法

无涯教程可以添加删除方法。

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

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

Sr.No.	Method & Details
1	Blaze.getData([elementOrView]) 用于从渲染元素中检索数据。
2	Blaze.toHTML(templateOrView) 用于将模板或视图呈现到字符串。
3	Blaze.toHTMLWithData(templateOrView，data) 用于将模板或视图呈现给包含其他数据的字符串。
4	new Blaze.View([name]，renderFunction) 用于创建DOM的新Blaze反应部分。
5	Blaze.currentView 用于获取当前视图。
6	Blaze.getView([element]) 用于获取当前视图。
7	Blaze.With(data，contentFunc) 用于构造一个使用context呈现某些内容的视图。
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。

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Service Mesh实战 -〔马若飞〕

Go进阶 · 分布式爬虫实战 -〔郑建勋〕

好记忆不如烂笔头。留下您的足迹吧 :)