Jade for Meteor

Jade works much like CoffeeScript but it is used for HTML instead. I recommend that you install the mquandalle:jade package. All the Jade files are saved with a .jade extension. This section will cover the most used aspects of Jade in Meteor such as HTML tags, components, and helpers.

HTML tags

Much like CoffeeScript, Jade is a language that depends heavily on tabbing. When you want to add children to an HTML tag, you simply use tab. Tag IDs and classes can be added using the CSS selector notation ('input#name.first'). This means classes are expressed with a dot (.) and IDs are expressed with a pound (#). Let's look at an example:

//- JADE
div#container
  ul.list
    li(data-bind="clickable") Click me!

<!-- HTML – OUTPUT -->
<div id="container">
  <ul class="list">
    <li data-bind="clickable">Click me!</li>
  </ul>
</div>

As you can see, special attributes such as data-bind are added with parenthesis. Symbols such as <, >, and closures are not required anymore. In this example, we have a div tag with an id attribute of "container", a ul tag with a class attribute of list, and a li tag with a special attribute of data-bind.

You will find yourself using special attributes often for the input tags to add value, placeholder, and other attributes.

Templates and components

Meteor templates are Jade components. In Meteor, we define a template with the template tag and apply the special name attribute to create a reusable HTML block. In Jade, when we create a template, we create a component as well. This looks as follows:

//- JADE
template(name="landing")
  h3 Hello World!

<!-- HTML – OUTPUT -->
<template name="landing">
  <h3>Hello World!</h3>
</template>

Now we can use this template as a Jade component anywhere in our views. To call a Jade component, you simply prepend a plus sign to the name of the template. Let's look at an example where we want to place a landing page inside a main_layout page:

//- JADE
template(name="landing")
  h3 Hello World!

template(name="main_layout")
  +landing

<!-- HTML – OUTPUT -->
<template name="landing">
  <h3>Hello World!</h3>
</template>

<template name="main_layout">
  {{> landing}}
</template>

That's it! Notice that we have prepended the plus (+) sign to the name of the template to call it. This is equivalent to using {{> landing}} in SpaceBars (Meteor's version of Handlebars). Components can have parameters as well, which can be later used in the templates' instance. Let's make our example output someone's name:

//- JADE
template(name="landing")
  h3 Hello {{name}}

template(name="main_layout")
  +landing(name="Mr Someone")

# COFFEESCRIPT
Template.landing.helpers
  "name": ->
    Template.instance().data.name

<!-- HTML – OUTPUT -->
<template name="landing">
  <h3>Hello {{name}}</h3>
</template>

<template name="main_layout">
  {{> landing name="Mr Someone"}}
</template>

Adding attributes to your templates can make your templates flexible as shown in the preceding example. Still, it is unlikely that you will have to use this as templates "soak up" data from their parent context.

Helpers

Helpers in Meteor are functions that return data before rendering to the view. We use helpers for iteration, logical statements, and variables. The two basic helpers are each and if, but adding the raix:handlebar-helpers package will add a dictionary of other useful helpers to keep your code from repeating. Let's have a look at how we can use our helpers:

//- JADE
template(name="list_of_things")
  each things
    if selected
      p.selected {{name}}
    else
      p {{name}}

<!-- HTML – OUTPUT -->
<template name="list_of_things">
  {{#each things}}
    {{#if selected}}
      <p class="selected">{{name}}</p>
    {{else}}
      <p>{{name}}</p>
    {{/if}}
  {{/each}}
</template>

In this example, the each helper is iterating through the return value of another helper named things and if the selected helper resolves to true, then we will render p.selected with the name variable.

It's important to understand that everything that is not an HTML tag is a helper, and that if you want to use a helper within a tag, you need to use {{}} or #{} to express this.

Go to jade-lang.com and handlebars.js to know more specific information. With this information, you should be able to do just about anything.