Meteor Blaze

最新推荐文章于 2024-09-25 08:43:46 发布

转载最新推荐文章于 2024-09-25 08:43:46 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/h2zZhou/p/7389980.html

Blaze是Meteor 软件包用于构建现场反应模板。

Render方法

这种方法被用于绘制模板到DOM。首先，我们将创建 myNewTemplate 之后渲染。我们增加 myContainer 这将用来作为父元素的容器，所以render方法知道在何处呈现我们的模板。

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>

下一步，我们将创建渲染功能这将需要两个参数。第一个是将要渲染的模板，第二个是，我们上面提到的父元素。

meteorApp/client/app.js

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

渲染数据

如果需要被动地传递一些数据，你可以使用 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方法的第二个参数添加数据。其它两个参数和之前的实例相同，在这个例子中我们的数据将用于记录一些文本的功能。

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]) 用于从渲染元素检索数据。
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。