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?
2 comentarios, 1 referencias
+
#