Fork me on GitHub← back

Emblem.js

Idioms

Some tips/tricks and common patterns that you may find useful while writing your Emblem.js templates.

To see the basic syntax of Emblem.js,
see the Syntax docs.

Lists (Block Expression Shorthand)

Emblem allows you to use = shorthand with block expressions. Because of this, you can achieve pretty succinct list declarations.

ul
  each items
    li Item name: #{name}

/ Shorter version:

ul = each items
  li Item name: #{name}

<ul>
  {{#each}}
    <li>Item name: {{name}}
  {{/each}}
</ul>

linkTo (Text Content for Block Expressions)

Some block helpers, such as Ember’s linkTo, are often used with a small chunk of text as the content of the block. Emblem provides a shorthand in these instance: use a pipe ’|’ to separate a block helper declaration from its text content.

/ The following three are equivalent
= linkTo "home"
  | Home

= linkTo "home" | Home

linkTo "home" | Home

ul
  li = linkTo "index" | Home
  li = linkTo "about" | About Us

{{#linkTo "home"}}Home{{/linkTo}}

<ul>
  <li>{{#linkTo "index"}}Home{{/linkTo}}</li>
  <li>{{#linkTo "about"}}About Us{{/linkTo}}</li>
</ul>

Colon Syntax for Inlining Nested Content

The colon separator is a way of nesting content on a single line. It’s essentially an alternative to a newline followed by indented content.

/ You could write something like this:
.container
  .row
    .span12
      p Hello

/ Or you could write something like this:
.container: .row: .span12: p Hello

/ It works for mustache blocks too:
li
  linkTo 'posts'
    span = linkText

/ With colons:
li: linkTo 'posts': span: linkText
    
/ You can consistently use it, even for simple cases.
legend: title 
legend = title

HTML Attribute Shorthand for Ember Helpers

*when using with Ember.js

You can use %, #, and . to set hash values for tagName, elementId, and class, respectively, on a Handlebars helper invocation.

This is most helpful for the various view helpers that Ember provides.

.field
  Ember.View%p#the-id.some-class
    | Nested content

  Ember.View %span#the-id.some-class
    | Adding a space before % also works.

<div class="field">
  {{#view Ember.View tagName="p" elementId="the-id" class="some-class"}}Nested content{{/view}}

  {{#view Ember.View tagName="p" elementId="the-id" class="some-class"}}Adding a space before % also works.{{/view}}
</div>

each/else

This isn’t strictly an Emblem pattern, but keep in mind that the each helper excepts an optional else portion that will be displayed when the list is empty or nonexistent.

each things
  p = name
else
  p There are no things!

{{#each things}}
  <p>{{name}}</p>
{{else}}
  <p>There are no things!</p>
{{/each}}

More on the way...

We’ll be updating this section periodically as the patterns come in from the wild.

Know a great Emblem trick? Submit one!