h1. Jaml: beautiful HTML generation for JavaScript

p. Jaml tries to emulate Ruby's Haml library, making it easy to generate HTML in your JavaScript projects.

h2. Examples

h3. Something Simple

Registering a template is easy:

bc.. Jaml.register('simple', function() { div( h1("Some title"), p("Some exciting paragraph text"), br(),

ul(
  li("First item"),
  li("Second item"),
  li("Third item")
)

); });

p. So is rendering it:

bc. Jaml.render('simple');

p. Here's the output (yes, the indentation really is that pretty):

pre.

h3. Templating

p. Usually we want to inject data into templates - let's see how to do that:

bc.. 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'})
)

); });

p. And now to render it:

bc.. //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);

p. Which gives us:

pre..

Battlestar Galactica DVDs

Best. Show. Evar.

View larger image

Quantity

h3. Collections and partials

p. We can reuse templates inside other templates. Here we make a Category template to hold more than one product:

bc.. Jaml.register('category', function(category) { div({cls: 'category'}, h1(category.name), p(category.products.length + " products in this category:"),

div({cls: 'products'},
  Jaml.render('product', category.products)
)

); });

p. Now we render it with a couple of products:

bc.. //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);

p. Which gives us:

pre..

Doovde

2 products in this category:

Battlestar Galactica DVDs

Best. Show. Evar.

View larger image

Quantity

Snow White

not so great actually

View larger image

Quantity

h3. Error handling

p. If the requested template does not exist, the renderer will return null:

bc.. => Jaml.render('missing'); => null

h3. Jaml Tests

p. You can run the Jaml test suite using either node.js at the command line or via a webpage-based runner.

h4. Run the tests in a browser

p. Jasmine must be checked out in a directory alongside jaml:

bc.. git clone https://github.com/pivotal/jasmine.git ls => jaml jasmine

p. ...then open specs/index.html in your browser.

h4. Run the tests using node.js

p. 1) Install node.js.

p. 2) Check out sconover's jasmine-node alongside jaml:

bc.. git clone https://github.com/sconover/jasmine-node.git ls => jaml jasmine-node

p. 3) Run the suite:

bc.. $ node specs/suite.js Started ..........................

Finished in 0.018 seconds X tests, Y assertions, 0 failures