Templates, helpers, and events
Now that we are on the same page for the languages that we are going to use throughout the book, let's do a quick review of some of the elements that we will use during our development process.
Templates, helpers, and events are used to build the frontend of your application. Using them effectively is the key to how we design our backend as well (which we will address in Chapter 2, Publish and Subscribe Patterns).
Templates
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.
Creating helpers
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.
Events
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.