Jaml tries to emulate Ruby’s Haml library, making it easy to generate HTML in your JavaScript projects.
Registering a template is easy:
Jaml.register('simple', function() { div( h1("Some title"), p("Some exciting paragraph text"), br(),
ul( li("First item"), li("Second item"), li("Third item") ) ); });
So is rendering it:
Jaml.render('simple');
Here’s the output (yes, the indentation really is that pretty):
<div> <h1>Some title</h1> <p>Some exciting paragraph text</p> <br /> <ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> </div>
Usually we want to inject data into templates – let’s see how to do that:
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'}) ) ); });
And now to render it:
//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);
Which gives us:
<div class="product"> <h1>Battlestar Galactica DVDs</h1> <p>Best. Show. Evar.</p> <img src="thumbnail.png" /> <a href="image.png">View larger image</a> <form> <label for="quantity">Quantity</label> <input type="text" name="quantity" id="quantity" value="1"></input> <input type="submit" value="Add to Cart"></input> </form> </div>
We can reuse templates inside other templates. Here we make a Category template to hold more than one product:
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) ) ); });
Now we render it with a couple of 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);
Which gives us:
<div class="category"> <h1>Doovde</h1> <p>2 products in this category:</p> <div class="products"><div class="product"> <h1>Battlestar Galactica DVDs</h1> <p>Best. Show. Evar.</p> <img src="thumbnail.png" /> <a href="image.png">View larger image</a> <form> <label for="quantity">Quantity</label> <input type="text" name="quantity" id="quantity" value="1"></input> <input type="submit" value="Add to Cart"></input> </form> </div> <div class="product"> <h1>Snow White</h1> <p>not so great actually</p> <img src="thumbnail.png" /> <a href="image.png">View larger image</a> <form> <label for="quantity">Quantity</label> <input type="text" name="quantity" id="quantity" value="1"></input> <input type="submit" value="Add to Cart"></input> </form> </div> </div> </div>
If the requested template does not exist, the renderer will return null:
=> Jaml.render('missing');
=> null
You can run the Jaml test suite using either node.js at the command line or via a webpage-based runner.
Jasmine must be checked out in a directory alongside jaml:
git clone https://github.com/pivotal/jasmine.git
ls
=> jaml jasmine
…then open specs/index.html in your browser.
1) Install node.js.
2) Check out sconover’s jasmine-node alongside jaml:
git clone https://github.com/sconover/jasmine-node.git
ls
=> jaml jasmine-node
3) Run the suite:
$ node specs/suite.js Started ..........................
Finished in 0.018 seconds X tests, Y assertions, 0 failures