Meteor Templates - Meteor

How to create templates in Meteor?

Meteor templates use three top level tags. First two are head and body. These tags perform same job as in regular HTML. Third tag is template where HTML will be connected to JavaScript.

Simple Template

Below example shows how this works. Let’s create a template with name = "myParagraph" attribute. Template tag is created below the body element, but it has to be included before it is rendered on screen. This can be acheived by using {{> myParagraph}} syntax. In the below template double curly braces ({{text}}) are used. This is meteor template language called Spacebars.

In the JavaScript file, we are setting Template.myParagraph.helpers({}) method which will be a connection to the template. Only text helper is used in this example.

meteorApp.html

meteorApp.js

After saving the changes, below output will be displayed

meteor-templates-output

Block Template

In this example we are using {{#each paragraphs}} to iterate over the paragraphs array and return template name = "paragraph" for each value.

meteorApp.html

Paragraphs helper has to be created as this will be an array with five text values.

meteorApp.js

Now five paragraphs can be seen on the screen.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Meteor Topics