jQuery para crear dinámicamente fragmentos HTML complejos

Question

deseo de generar (o por lo menos llenar una plantilla de algún tipo con los datos JSON y añadir a una lista) un elemento div HTML semi-complejo usando jQuery. Los datos están en formato JSON (si es importante) y para cada entrada principal deseo agregar otro div a un elemento tipo carrusel.

Una larga sentencia como:

$('#list').append('<li><div id=" + entry.id +"><span id="highlight> + entry.name + <span/><div id="picture" .... 

funciona, pero es demasiado difícil de mantener (errores excusa no es sólo para hacer un punto). Debe haber una manera más eficiente.

Gracias.

Answer 1

Usted está buscando en javascript lenguajes de plantillas - hay toneladas por ahí:

• underscore.js;
• mustache.js;
• jade;
• handlebars.js;
• muchos más ...

La idea es mantener los datos y separada de su punto de vista:

var myUser = { name : 'John', lastname : 'Doe' }; 

$('#awesomeDiv').html(
    someTemplateFunction({ user : myUser }) 
); 

Y someTemplateFunction() llevará a cabo en su cuerpo algo como:

<p>Hello <strong><%=user.name %> <%=user.lastname %></strong></p> 

Por sosteniendo quiero decir que la biblioteca de la plantilla es capaz de analizar dicha plantilla [procedente del DOM o desde un archivo externo] y para renderizarlo a nuevos elementos DOM.

Mi elección es underscore.js porque es una biblioteca muy útil pero mínima, no dude en echar un vistazo.

Answer 2

Usted está buscando un poco de plantillas. Hay muchos:

• Handlebars
• Hogan
• dust.js
• Mustache
• underscore templates
• jQuery templates

Answer 3

No sabe si va a trabajar por lo que' volviendo a hacerlo, pero recientemente tuve un problema similar y no quería 'contaminar' mi js con html para insertarlo. Mi solución fue insertar todo el html en la página y dejarlo oculto para que, cuando sea necesario, simplemente pueda revelarlo o, en algunos casos, copie el div deseado.