Jaml: Haml templates for JavaScript

Jaml is an HTML-templating engine for JavaScript. It allows one to easily generate HTML in one’s JavaScript project.

Jaml mimics Haml as closely as possible, but with embedded JavaScript instead of Ruby. Most of what you need to know to use Jaml can be learned from reading the Haml documentation.

Jaml is implemented as an external DSL. One writes one’s templates in Jaml format then uses the jamlize utility to translate those templates to JavaScript code.

Requirements

The Jaml source-to-source translater is written in Haskell. As such, one needs a Haskell compiler to build the executable. Jaml has been tested only with GHC.

We use Rake (Ruby Make) to build the jamlize executable. If you prefer not to use Rake, the Rakefile is very simple and could easily be ported to Make or a simple shell script.

Not that Jaml

There’s another project also called Jaml. It’s very cool, but different.

• That Jaml:
  • allows one to write something similar to (but different from) Haml.
  • is an internal DSL in JavaScript.
• This Jaml:
  • is meant to be as close as possible to Haml.
  • is an external DSL which source-to-source translates to JavaScript.

We chose to keep the name “Jaml” in spite of the name collision, because we’ve already been using it at Glyde for a few years.

Example

This example was shamelessly stolen (and expanded) from the other Jaml’s README.

// File: my_class.jaml
%template.MyJsClass#render{ args: [product] }
  .product
    %h1= product.title

    %p= product.description

    %img{ src: product.thumbUrl }
    if (product.imageUrl)
      %a{ href: product.imageUrl } View larger image

    %form
      %label{ for: 'quantity' } Quantity
      %input#quantity{ type:  'text',
                       name:  'quantity',
                       value: 1
                     }
      %input{ type:  'submit',
              value: 'Add to Cart'
            }

To use:

1. Include jaml.js in your project.
2. Translate the .jaml file to JavaScript:

   bin/jamlize my_class.jaml > my_class_jaml.js

3. Include my_class_jaml.js in your project.

Differences from Haml

Multiple templates per file

With Haml, each template lives in its own file. But with Jaml, each .jaml file may contain more than one template. Each template is translated into a JavaScript function.

Each template begins with a %template tag, like this:

%template.MyClass#my_function{ args: [arg1, arg2] }

MyClass is the name of the JavaScript object (if any) for which the function is to be a member. These can be nested, with each level of nesting separated by dots (‘.’).

my_function is the name of the function we’re creating.

The curly-brace-enclosed object literal { args: [arg1, arg2] } is optional. Currently, it supports only one key, args, whose value is expected to be a JavaScript Array, the formal parameters (if any) to the function.

No support for ‘|’

Haml allows lines to end with ‘|’, indicating that it’s part of a multiline string. Jaml does not currently support this.

Code comments

In addition to Haml’s -# code comments, Jaml also supports -//.

HTML (and IE conditional comments) are the same as in Haml.

Help

Please contact the author with questions.