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。