Quizás lo más laborioso y repetitivo de Javascript es la creación de elementos DOM, por ello, son muchas las herramientas que hemos visto para generar esta tarea, incluso montamos una función (create()) que nos permitía crear estos elementos más fácilmente.
Jaml, es una implementación más que permite generar fácilmente estos elementos DOM, usando una estructura muy clara nos permite generar un código realmente limpio.
// Javascript
div(
h1({cls: 'titulo'}"Some title"),
p("Some exciting paragraph text"),
br(),
ul(
li("First item"),
li("Second item"),
li("Third item")
)
);
// HTML generado
<div>
<h1 class="titulo">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>Además, disponemos de una serie de métodos que nos permite generar templates que podemos usar pasándole un objeto para personalizar la salida.
// 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'})
)
);
});
// Cargamos el objeto
var bsg = {
title : 'Battlestar Galactica DVDs',
thumbUrl : 'thumbnail.png',
imageUrl : 'image.png',
description: 'Best. Show. Evar.'
};
// Cargamos el template con el objeto generado
Jaml.render('product', bsg);
// Resultado
<div>
<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>Sin duda, una forma cómoda y util que podemos tener en cuenta.
4 comentarios, 2 referencias
+
#