Interfaccia utente jQuery: il modo migliore per caricare il markup HTML?

Question

Qual è il modo migliore per caricare il markup HTML per un widget UI jQuery personalizzato?

Finora ho visto elementi semplicemente creati usando stringhe (cioè $(...).wrap('<div></div>')) che vanno bene per qualcosa di semplice. Tuttavia, ciò rende estremamente difficile la modifica in seguito per elementi più complessi.

Questo sembra un problema abbastanza comune, ma so anche che la libreria dell'interfaccia utente jQuery è abbastanza nuova da non esistere una soluzione ampiamente accettata per questo. Qualche idea?

Answer 1

Qualcosa che è abbastanza pulito da fare è questo:

var newDiv = $("<div></div>"); //Create a new element and save a reference
newDiv.attr("id","someid").appendTo("body");

In questo modo, stai creando un elemento e ne memorizzi il riferimento in una variabile, per un uso successivo.

Answer 2

Se hai una grande quantità di HTML complesso e non vuoi gestire stringhe codificate nel tuo codice JavaScript, puoi metterlo in un file HTML separato e usare Funzione di caricamento Ajax .

È concatenabile, quindi puoi caricare il file HTML (l'intera cosa, o un frammento selezionato), iniettarlo nel tuo DOM attuale e andare avanti.

Answer 3

Molte volte per modelli davvero complessi memorizzerò i blocchi html come stringhe negli oggetti JSON per un accesso successivo ... ad es .:

var temp = {
  header : "<div class='foo'><h3>{HEADER}</h3></div>",
  content : "<div class='bar'><p>{COPY}</p></div>"
}

E poi esegui un po 'di sostituzione su quelli quando le cose tornano. In questo modo il markup è in qualche modo separato dalla logica per caricare i dati, quindi lo scambio di modelli ecc. Può essere un po 'più veloce.

var text = "I am the header text";
var head = new String(temp.header);
$(target).append(head.replace("{HEADER}",text));

Comunque, questo approccio ha funzionato bene con i widget AJAX e quel genere di cose, dove esiste la possibilità che il design possa cambiare radicalmente.

Answer 4

Un metodo popolare ed efficiente consiste nell'output di tutto il markup aggiuntivo (qualsiasi cosa possa essere necessaria in seguito) in fondo alla pagina nei tag di script, in modo che il markup non venga eseguito dal browser.

<script type="text/template" id="template-example">
    <!-- All of your markup here -->
    <% // do some JavaScript in here... %>
    <%= echo_this_variable %>
</script>

Puoi quindi prendere il tuo markup usando jQuery ...

var markup = $('#template-example').html();

E analizza quegli esempi di JS che ho inserito lì usando un motore di template, come quello in Underscore.js (che consiglio) o uno di quelli jQuery in questa risposta: motori di template jQuery

Buon divertimento!