View Template

October 19, 2015

From previous post, meteorblog.html have the following code.

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">
    {{> loginButtons}}
</template>

{{> hello}} tells meteor to insert the content of the hello template at that location. {{> loginButton}} is provided by the accounts-ui package for a simple view of login/registration forms.

Template

The template file ends with .html for Meteor. The template is how meteor displays the html and css of the app. You would write template as normal html with some {{ }} brackets for special operations. The example here is with {{> ...}}. The > operator tells meteor to show a template with that name.

Typically meteor app will have a layout.html which will look something like this.

<body>
  {{renderPage}}
</body>

<template name="layout">
    {{> navbar}}
    {{> yield}}
    {{> footer}}
</template>

The navbar template is for the navigation bar, the footer template is for the footer and yield is for whatever template the route is suppose to point to. That way, every page that your app is serving will have the navigation bar and footer included.

Typically the template filename and the template name are the same. But you can also have multiple templates in a single file. For example, post.html file can have list_posts, show_post, add_post, edit_post etc templates so that all post related views are within a single html file.

Template functions

Other examples include

  • {{#each ...}} ... {{/each}}
  • {{#if ...}} ... {{else}} ... {{/if}}
  • {{#with ...}} ... {{/with}}

The following example shows how to use the operator. The plan data object have entry name label and description. So this will display all plans with a h3 and p html tags each.

{{#each plans}}
    <h3>{{label}}</h3>
    <p>{{description}}</p></hr>
{{/each}}

Template Helper

There’s also template helper that allow you to create any function and output to the view. But we wouldn’t go into detail now.