Jaml es una libreria con la que podremos generar elementos DOM de una manera sencilla, con una sintaxis tan simple como esta:

div(
 h1({cls: 'titulo'}"Some title"),
 p("Some exciting paragraph text"),
 br(),
 ul(
   li("First item"),
   li("Second item"),
   li("Third item")
 )
);

Se generará lo siguiente:

<div>
 
<h1 class="titulo">Some title</h1>
 
 
Some exciting paragraph text
 
<ul>
 
	<li>First item</li>
 
 
	<li>Second item</li>
 
 
	<li>Third item</li>
 
</ul>
</div>

Ademas, cuenta con metodos que permiten la creacion de templates, veamos un ejemplo:
Registramos la plantilla:

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'})
   )
 );
});

Luego cargamos un objeto:

var bsg = {
 title      : 'Battlestar Galactica DVDs',
 thumbUrl   : 'thumbnail.png',
 imageUrl   : 'image.png',
 description: 'Best. Show. Evar.'
};

Y finalmente le pasamos el objeto y el template a Jaml.render()

Jaml.render('product', bsg);

De esa forma obtendremos esta salida:

<div>
 
<h1>Battlestar Galactica DVDs</h1>
 
 
Best. Show. Evar.
 
 <img src="thumbnail.png" alt="" />
 <a href="image.png">View larger image</a>
<form>
   <label for="quantity">Quantity</label>
<input id="quantity" name="quantity" type="text" value="1" />
<input type="submit" value="Add to Cart" />
</form></div>

Pueden descargarla y ver mas ejemplos en la web oficial.

Share