Emblem.js

Emblem.js is an indentation-based templating language that prints Handlebars.js templates. Specifically, it targets Ember.js templates.

Emblem's syntax most closely resembles that of the Slim templating language. Please see the Emblem docs site for a full explanation of the syntax.

Also check out the Embercast on Emblem.js

Installation with Ember-CLI

To use Emblem with Ember-CLI, use the ember-cli-emblem addon.

Handlebars Version Dependencies

As of Emblem 0.5.0, the compiler is really a template printer. Previous versions compiled to Handlebars AST nodes and were forced to target specific versions of Handlebars. The move to printing has eliminated that restriction, and Emblem 0.5.0 should be compatible with any version of Handlebars.

For posterity, here is a history of Emblem and Handelbars compatibility across revisions.

• HTMLBars: Emblem 0.5.0+
• Handlebars 2.0.0: Use Emblem ~0.4.0, or 0.5.0+
• Handlebars 1.0.0: Use Emblem ~0.3.0, or 0.5.0+
• Handlebars <= 1.0.0.rc4: Use Emblem <= 0.2.9, or 0.5.0+

Using Emblem in your application

Previous versions of Emblem have supported a "vanilla" Handlebars mode. The intent was that Ember-specific helpers could be avoided.

Emblem 0.5.0 dropped support for vanilla template compilation, but we would like to bring it back. Please refer to VANILLA_HANDLEBARS.md for more context.

Building Emblem.js

Clone the repo, then run:

yarn install
ember build

To run tests in the browser, run:

ember test --serve

The tests will be available at http://localhost:4200/tests/.

To run tests in Headless Chrome and Node (which is how CI runs), use:

ember test

Reporting Bugs

If you find a bug in Emblem syntax, please try to reproduce it in its simplest form with this JSBin before reporting an issue, which will help me nail down the source of the issue.

Emblem was authored and released by Alex Matchneer (@machty).

The Emblem 0.5.0 release was generously funded by Vestorly. Vestorly is a technology company solving the content marketing problem for individual professionals, small businesses, and the enterprises that support them. Vestorly's user interface is built entirely with Ember.js and modern web technologies. Vestorly is hiring!

0.12.1

• Fix issue with spacing around explicit mustache #329

0.12.0

• Test reorg #325
• Mustache keys can have underscores #323
• Better errors / multiple small bugfixes #322
  • Fix #320 Remove legacy partial syntax
  • Fix #318 Add spread attributes to glimmer components
  • Fix #317 Block params can have @
  • Fix #316 Make bracket params more flexible with newlines and comments
  • Fix #279 $ in attribute/value names
• Updated build tools #319
• Module namespace support #313

0.11.1

• Bump support for Handlebars >= 2.0 #315

[0.10.0# 0.10.0

• Refactoring for clarity and consistency of bracketed attributes, both for mustache and HTML elements #312
• Fix attributes with bound classes and unless #311
• Named Args and Named Blocks Syntax #301

0.9.3

• Move HTML attribute quoting behind a feature toggle

0.9.2

• Properly quote mustache for non-event HTML attributes
• Add some missing event aliases

0.9.1

• Fix issue with number literals as HTML attributes
• Tests run on Node 4

0.9.0

• Support bracket params in subexpressions
• block params no longer allow subexpressions
• else / else if nodes should now accept the full range of mustache attrs
• bracketed attrs can have comments (sort of)
• added yarn

0.8.2

• Fix variation on subexpressions
• Add menuitem as HTML element
• Fix bug with actions that have 'action' as a value

0.8.1

• Fix issue with bracketed attributes without blocks

0.8.0

• Add a wider variety of support for bracketed attributes and blocks / block params
• Initial support for glimmer components using % helper
• Fix issue with comments breaking if / else block indentation
• Fix issue with multiple nested subexpressions
• Allow for a wider range of attribute options on dom elements (i.e. full range of closure action syntax)

0.7.1

• Allow slashes in attr values

0.7.0

• Added new spacing helper: + will add an extra space before line
• Fixed a bug with bound attributes in brackets
• Fixed a bug with using a pipe and a bound variable

0.6.0

Emblem no longer outputs {{bind-attr}}s for attribute bindings, but instead outputs HTMLBars bound attribute syntax, e.g.

p class=foo Hello

generates:

<p class={{foo}}>Hello</p>

Likewise, colon syntax for class names will map to an inline if:

div class=foo:bar:baz                        =>    <div class={{ if foo 'bar' 'baz' }}>
.alert class=foo:bar:baz                     =>    <div class="alert {{ if foo 'bar' 'baz' }}">
.alert class={ foo:bar:baz one:two:three }   =>    <div class="alert {{ if foo 'bar' 'baz'}} {{if one 'two' 'three'}}">

0.5.1

Added support for block params.

0.5.0

As of version 0.5.0, the output of an Emblem compile call is a Handlebars-syntax string that can then be compiled by Handlebars.

This represents a breaking change for toolchains that expect Emblem's compile output to be an executable compiled Handlebars template function, but from an end-user perspective the Emblem syntax should be mostly backward-compatible.

Note: Some of the "vanilla Handlebars" syntax for Emblem has not yet been ported, especially in cases where it conflicts with (or is unsupported by) the expected output for the same syntax with "Ember Handlebars". In future releases it will be possible to compile Emblem templates separately for "vanilla" Handlebars and "Ember" handlebars syntaxes.