Templates, helpers, and events

Meteor templates are the special blocks of HTML code that generate Meteor template objects (Template.<yourtemplate>). It is through Meteor template objects that we wire the HTML code to logic. People who have worked with an MVC framework will refer to these templates as views. This is a key concept to understand.

Open up your terminal and create a new project:

meteor create basic_meteor

Now let's add our languages:

meteor add coffeescript
meteor add mquandalle:jade
meteor add mquandalle:stylus

Remove the three visible files from /basic_meteor (do not remove any of the files starting with a dot), and create /client/layout.jade. This is something that exists in one way or another in every Meteor project. Let's program:

//- layout.jade
head
  title Meteor Basics
  meta(name="viewport" content="user-scalable=no, initial- scale=1.0, maximum-scale=1.0")
  meta(name="apple-mobile-web-app-capable" content="yes")
body
  +basic_template

I highly recommend adding these metatags to make your site mobile-friendly right from the beginning. With this snippet of code, we are effectively starting up the very first thing that Meteor is going to render before running any code. Once this is rendered, Jade takes care of rendering basic_template. Let's program this in a new file, /client/basic_template.jade:

//- basic_template.jade
template(name="basic_template")
  h1 Hello World!

Behind the scenes, Meteor is compiling our Jade templates and putting them all in one big file. You will never have to worry about loading basic_template.jade before layout.jade when it comes to templating.

Throughout the book, we will use meteorhacks:flow-router and meteorhacks:flow-layout to easily navigate to different templates.

We have already discussed what helpers are in Jade, but how do we create helpers in Meteor? Let's go back to our basic_meteor project and create /client/basic_template.coffee. It is important to understand that Meteor helpers are used to control the variables in our template. People who have worked with an MVC framework can view this file as a controller. Let's write our first helper:

#basic_template.coffee
Template.basic_template.helpers
  "name": ->
    "Mr Someone"

Notice that the helper is defined within the helpers function of the Meteor template object: Template.<your_template>.helpers(<your_helpers>). Helpers are mostly functions that will return anything you want them to including Meteor collection cursors. Let's bring all this together now:

//- basic_template.jade
template(name="basic_template")
  h1 Hello {{name}}

This will output Hello Mr Someone inside the h1 HTML tag. Let's add a slightly more complex helper:

#basic_template.coffee
Template.basic_template.helpers
  "person": ->
    name:"Someone"
    prefix: "Mr"
    children: [
      {
        name:"Billy"
      }
      {
        name:"Nancy"
      }
    ]

//- basic_template.jade
template(name="basic_template")
  with person
    h1 Hello {{prefix}} {{name}}

    ul
      each children
        li {{name}}

In this example, we are using with to set up the data context of the HTML tags that belong to it; this data context is equivalent to person. Data context refers to the value of this inside a helper. So if you set up an object as the data context, this will be equivalent to that object. Also, we iterate through children with an each statement so that we can list out their names.

Meteor taps into common JavaScript HTML events such as click, change, and focus. An event is anything that happens to an HTML element that you are listening to. Suppose we want to be able to change the name of a person to one of the children by clicking on them. We do this through the templates' event map. Let's take a look at an example of how we can do this without using reactivity or collections:

#basic_template.coffee
Template.basic_template.events
  "click li": ->
    $("h1").text "Hello #{@name}"

Easy! So to catch template events, we need to use the Template.<your_template>.events(<your_event_map>) function. In this particular example, we are using jQuery to replace text.

The event map is an object where the properties specify a set of events to be handled. These events may be specified in any of the following ways:

# Runs any time you click anywhere
"click": ->

# Runs any time you click a li element
"click li": ->

#Runs any time you click a li element OR mouseover a li element
"click li, mouseover li": ->

The key string of the event is composed of two parts: the first is always a type of event (click, hover, change, and so on) while the second is always a CSS selector.