Jaml: JavaScript Haml
Jaml is a small but delightful way of rendering HTML using JavaScript. It uses a simple DSL-like syntax to DRY up your code.
There are only 2 steps - registering a template and rendering it. Let's look at something simple first. On the left of each example is the source code, and on the right the rendered output.
In each example on this page, the output in the textarea on the right has been evaluated from the text on the left, so if for some crazy reason you have JavaScript disabled you won't see anything...
Starting Simple
Here's how we can represent a simple HTML template in JavaScript with Jaml:
Jaml.register('simple', function() {
div(
h1("Some title"),
p("Some exciting paragraph text"),
br(),
ul(
li("First item"),
li("Second item"),
li("Third item")
)
);
});
Jaml.render('simple');
Pretty simple stuff. Jaml knows how to render our tags and in what order, which tags are self closing, and so on.
Apart from slightly terser syntax, the main advantage here is that we can define HTML templates in JavaScript, instead of having to worry about ugly string interpolation.
Templating
Let's say we want to render a product <div>. Being good little programmers we'd like to separate our content from our presentation so we register a product template like this:
Jaml.register('product', function(product) {
div({cls: 'product'},
h1(product.title),
p(product.description),
img({src: product.thumbUrl}),
a({href: product.imageUrl}, 'View larger image'),
form(
label({'for': 'quantity'}, "Quantity"),
input({type: 'text', name: 'quantity', id: 'quantity', value: 1}),
input({type: 'submit', value: 'Add to Cart'})
)
);
});
//this is the product we will be rendering
var bsg = {
title : 'Battlestar Galactica DVDs',
thumbUrl : 'thumbnail.png',
imageUrl : 'image.png',
description: 'Best. Show. Evar.'
};
Jaml.render('product', bsg);
Partials & Collections
Let's say we have several products inside a Category. We can reuse our 'product' template within another, like this:
Jaml.register('category', function(category) {
h1(category.name),
div({cls: 'category'},
p(category.products.length + " products in this category:"),
div({cls: 'products'},
Jaml.render('product', category.products)
)
);
});
//here's a second product
var snowWhite = {
title : 'Snow White',
description: 'not so great actually',
thumbUrl : 'thumbnail.png',
imageUrl : 'image.png'
};
//and a category
var category = {
name : 'Doovde',
products: [bsg, snowWhite]
}
Jaml.render('category', category);
Download
You can download this project in either zip or tar formats.
You can also clone the project with Git by running:
$ git clone git://github.com/edspencer/jaml