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');
=> nullYou 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-node3) Run the suite:
$ node specs/suite.js Started ..........................Finished in 0.018 seconds X tests, Y assertions, 0 failures
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent