Contenido

Jaml, bonita forma de generar HTML desde Javascript

7 Dic

+ 6

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.

  • Precisamente hace poco he tenido que hacer algo como eso desde cero 🙁 gracias, aunque no voy a cambiar lo que tengo hecho.

    Para los que se lo pregunten, si, esto deveria de ser mas rápido que parsear una sopa de etiquetas con $("..."). Ademas de ser mas extensible y mas estricto en cuanto a errores (algunos pensaran que eso es malo, pero os aseguro que a la larga, es mejor así)

    Lo único que hecho de menos es una manera de poder crear elementos de un espacio de nombres (namespace) diferente al del documento actual.

  • Me gustó más el Easy DOM creation, aunque quizá este tenga más versatilidad.

    Y sí, la verdad es que hacer esto a mano es un poco muerte.

  • Tenía pensado realizar un bookmarklet para compartir información con uno de mis sitios, creo que usare Jaml para generar el HTML por la facilidad que le veo. Gracias Andrés!

  • Andrés lamento discrepar pero Jaml no toca para nada el DOM, simplemente es un motor de plantillas para generar HTML textual.

    Aporta buenas ideas en su código, pero no dichas ideas no son especialmente eficientes. El propio autor lo explica en un comentario en el código fuente:

    The render process uses two dirty but necessary hacks. First, the template function is decompiled into a string (but is not modified), so that it can be eval’ed within the scope of Jaml.Template.prototype. This allows the second hack, which is the use of the ‘with’ keyword. This allows us to keep the pretty DSL-like syntax, though is not as efficient as it could be.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.