Meteor - Blaze

Blaze is a Meteor package for building live 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>
   <div id = "myContainer">
   </div>
</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.isClient) {
      var myNewTemplate = Template.myNewTemplate;
      var myContainer = document.getElementById('myContainer');
      Blaze.render(myNewTemplate, myContainer);
   }
});
Meteor Blaze Render

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>
   <div id = "myContainer">
   </div>
</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.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);
   }
});
Meteor Blaze Render With Data

Remove Method

We can add remove method.

meteorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div id = "myContainer">
   </div>
</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.isClient) {
      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.
Advertisements