Contenido

PURE: HTML Templates con Javascript

12 Ago

+ 3

PURE, no es el primer script para trabajar con templates HTML que comentamos aqui, pero si que es el que está de moda ahora mismo. Y no me extraña, por que por lo poco que he podido ver es realmente flexible y puede ser usado en cualquier aplicación web.

Templates HTML

Al igual que los motores de plantillas de PHP, en Javascript podemos vernos obligados a usar plantillas que se repitan N veces y debamos usar una plantilla que únicamente tengamos que reemplazar ciertos valores de su interior. Por ejemplo los comentarios de un blog, que al insertarlos en la BD mediante Ajax, pintamos el comentario como si hubieramos recargado la página.

El código

//HTML
<div id="hello">
     Hello <span class="who">World</span>
</div>
<a href="#" onclick="render();return false;">Render</a>
<div id="target"></div>
//Javascript
function render(){
     var html = document.getElementById('hello');
     var context = { "name": "Mary" };
     var directive = {"span.who":"name"};
     html = $p.map( directive, html);
     var target = document.getElementById('target');
     $p.render(html, context, target);
}

Como vemos en el ejemplo anterior, indicamos que el elemento «#hello» será nuestra plantilla y su contenido será usado para convertirse en el contenido de «#target«. Por otro lado, indicamos el contexto name cuyo valor será el Mary y definimos la directiva que aplicará el contexto name al span.who, reemplazando su valor por el definido en el contexto. Dejando un resultado así:

<div id="target">
     <div id="hello">
         Hello <span class="who">Mary</span>
     </div>
</div>

Nos ahorramos bastante código, ¿no crees?

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.