Meteor Templates

Last Updated : 31 Dec, 2021

Meteor is a full-stack JavaScript platform that is used for developing modern web and mobile applications. Meteor has a set of features that are helpful in creating a responsive and reactive web or mobile application using JavaScript or different packages available in the framework. It is used to build connected-client reactive applications.

Three top-level tags are used in Meteor templates. The head and body are the first two. These tags have the same functionality as conventional HTML tags. Template is the third tag where we link HTML and JavaScript together.

The same template can appear on a website multiple times by using {{> templatename}}, and these occurrences are referred to as template instances. Template instances have a life cycle in which they are produced, placed in the document, and then removed and deleted. Meteor takes care of these steps for you, including identifying when a template instance has to be cleaned up after it has been removed or changed. When a template instance is in the document, you can associate data with it and access its DOM nodes.

Syntax:

<template name="gfg">
    ...
</template>

Creating Meteor Application and Importing Module:

Step 1: Create a Meteor application using the following command.

meteor create foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: Import Template module from ‘meteor/templating’

import { Template } from 'meteor/templating'

Project Structure: It will look like the following.

Step to Run Application: Run the application from the root directory of the project, using the following command.

meteor

Example: This is the basic example that shows how to use the Template component.

Main.html

<head> 
    <title>gfg</title> 
</head> 
  
<body> 
    <h1 class="heading">GeeksforGeeks</h1> 
    {{> frameList}} 
</body> 
  
<template name="frameList"> 
    <h3>JavaScript Frameworks</h3> 
    <ul> 
        {{#each frameworks}} 
        {{> framework}} 
        {{/each}} 
    </ul> 
</template> 
  
<template name="framework"> 
    <li>{{list}}</li> 
</template>

Main.js

import { Template } from 'meteor/templating'; 
import './main.html'; 
  
Template.frameList.helpers({ 
    frameworks: function () { 
        return [ 
            { list: "Meteor" }, 
            { list: "Vue" }, 
            { list: "Next" }, 
            { list: "Angular" }, 
        ] 
    } 
});