jQuery per creare dinamicamente frammenti HTML complessi

Question

Desidero generare (o almeno riempire un modello di qualche tipo con dati JSON e aggiungere a un elenco) un elemento div HTML semi-complesso utilizzando jQuery. I dati sono in formato JSON (se è importante) e per ogni voce genitore desidero aggiungere un altro div a un elemento di tipo carosello.

Una lunga dichiarazione come:

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

funzionerà, ma è troppo difficile da mantenere (errori scusa non è solo per fare un punto). Ci deve essere un modo più efficiente.

Grazie.

Answer 1

siete alla ricerca in javascript lingue template - ci sono tonnellate là fuori:

• underscore.js;
• mustache.js;
• jade;
• handlebars.js;
• molti di più ...

L'idea è quella di mantenere i dati e la sua vista separata:

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

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

E someTemplateFunction() terrà nel suo corpo come qualcosa:

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

By con Intendo che la libreria di modelli è in grado di analizzare tale modello [proveniente dal DOM o da un file esterno] e renderlo disponibile a nuovi elementi DOM.

La mia scelta è underscore.js perché è una libreria molto minimale ma utile, sentiti libero di guardarti intorno.

Answer 2

Stai cercando un modello. Ci sono molti:

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

Answer 3

Non so se funzionerà per quello che' sto facendo ma recentemente ho avuto un problema simile e non volevo 'poluto' il mio js con html da inserire. La mia soluzione era inserire tutto il codice HTML nella pagina e lasciarlo nascosto in modo tale che, quando necessario, posso semplicemente rivelarlo o, in alcuni casi, copiare il div desiderato.