Meteor - Blaze-alljchome-开发者的教程家园

Meteor Tutorial

Meteor Useful Resources

Selected Reading

Meteor - Blaze

Blaze is a Meteor package for building pve reactive templates.

Render Method

This method is used for rendering templates into the DOM. First, we will create myNewTemplate that will be rendered. We will also add myContainer, which will be used as a parent element, so the render method knows where to render our template.

meteorApp.html

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

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

Next, we will create a render function that will take two arguments. The first one is a template that will be rendered and the second one is a parent element that we mentioned above.

meteorApp.js

Meteor.startup(function () {

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

Render with Data

If you need to pass some data reactively, you can use renderWithData method. The HTML will be exactly the same as in the previous example.

meteorApp.html

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

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

We can add our data as a second argument in Meteor.renderWithData method. The other two arguments are the same as in the previous example. In this example, our data is a function that will log some text.

meteorApp.js

Meteor.startup(function () {

   if(Meteor.isCpent) {
      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 Method

We can add remove method.

meteorApp.html

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

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

In this example, we are rendering the template that will be removed after three seconds. Notice the Blaze.Remove method that we are using to remove the template.

meteorApp.js

Meteor.startup(function () {

   if(Meteor.isCpent) {
      var myNewTemplate = Template.myNewTemplate;
      var myContainer = document.getElementById( myContainer );
      var myRenderedTemplate = Blaze.render(myNewTemplate, myContainer);

      Meteor.setTimeout(function() {
         Blaze.remove(myRenderedTemplate);
      }, 3000);
   }
});

The following table shows the other methods that can be used.

Sr.No.	Method & Details
1	Blaze.getData([elementOrView]) Used for retrieving data from the rendering element.
2	Blaze.toHTML(templateOrView) Used for rendering templates or views to the string.
3	Blaze.toHTMLWithData(templateOrView, data) Used for rendering templates or views to the string with additional data.
4	new Blaze.View([name], renderFunction) Used for creating a new Blaze reactive part of the DOM.
5	Blaze.currentView Used for getting the current view.
6	Blaze.getView([element]) Used for getting the current view.
7	Blaze.With(data, contentFunc) Used for constructing a view that renders some content with context.
8	Blaze.If(conditionFunc, contentFunc, [elseFunc]) Used for constructing a view that renders some conditional content.
9	Blaze.Unless(conditionFunc, contentFunc, [elseFunc]) Used for constructing a view that renders some conditional content (inverted Blaze.if).
10	Blaze.Each(argFunc, contentFunc, [elseFunc]) Used for constructing a view that renders contentFunct for every item.
11	new Blaze.Template([viewName], renderFunction) Used for constructing a new Blaze view with name and content.
12	Blaze.isTemplate(value) Used for returning true, if the value is a template object.

Meteor - Blaze

Render Method

meteorApp.html

meteorApp.js

Render with Data

meteorApp.html

meteorApp.js

Remove Method

meteorApp.html

meteorApp.js

友情链接