1) Se lanza un evento javascript
2) Se genera una petición al servidor
3) El servidor produce código javascript de vuelta con el objetivo de añadir/eliminar HTML de la página.
Cuando hay que insertar gran cantidad de HTML el código javascript producido suele ser poco mantenible, el primer planteamiento es crear una gran cadena de marcado HTML para insertarla en algún lugar de la página.
Por suerte, existe un plugin para la librería jQuery llamado jQuery Templates que elimina este problema.
Para usar este plugin, podemos definir una plantilla javascript de la siguiente forma:
<script id="templateId" type="text/x-jquery-tmpl">
${templateText}
</script>
Siguiendo este ejemplo, con el id 'templateId' recuperaremos posteriormente la plantilla y podremos hacer la sustitución de 'templateText' con la siguiente llamada.$("#templateId").tmpl({templateText:"Hello world"})
Como se puede ver, es similar a cualquier sistema de plantillas, se puede interpolar marcado HTML, crear condicionales:<script id="templateId" type="text/x-jquery-tmpl">
{{if error}}
<h2>Error!</h2>
{{else}}
<h1>OK</h1>
{{/if}}
</script>
$("#templateId").tmpl({error:false})
O incluso bucles:<script id="templateId" type="text/x-jquery-tmpl">
<h1>${title}</h1>
{{each items}}
<li>${$value}</li>
{{/each}}
</script>
$("#templateId").tmpl({title:"Titulo", items:["uno", "dos", "tres"]})
