IU jQuery: ¿La mejor manera de cargar el marcado HTML?

Question

¿Cuál es la mejor manera de cargar el marcado HTML para un widget jQuery UI personalizado?

Hasta ahora, he visto elementos simplemente creados usando cadenas (es decir, $(...).wrap('<div></div>')) lo cual está bien para algo simple. Sin embargo, esto hace que sea extremadamente difícil modificarlo más tarde para elementos más complejos.

Esto parece un problema bastante común, pero también sé que la biblioteca jQuery UI es lo suficientemente nueva como para que no haya una solución ampliamente aceptada para esto. ¿Alguna idea?

Answer 1

Algo que es bastante bueno para hacer es esto:

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

De esa manera, está creando un elemento y almacenando su referencia en una variable, para su uso posterior.

Answer 2

Si tiene una gran cantidad de HTML complejo y no desea tratar con cadenas codificadas en su código JavaScript, puede ponerlo en un archivo HTML separado y usar Función de carga Ajax .

Es encadenable, por lo que puede cargar el archivo HTML (todo, o un fragmento seleccionado), inyectarlo en su DOM actual y continuar.

Answer 3

Muchas veces para plantillas realmente complejas, simplemente almacenaré los bloques html como cadenas en objetos JSON para un acceso posterior ... por ejemplo:

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

Y luego simplemente realice algún reemplazo en esos cuando las cosas vuelvan. De esa forma, el marcado se separa de la lógica para cargar los datos, por lo que intercambiar plantillas, etc. puede ser un poco más rápido.

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

De todos modos, este enfoque me ha funcionado bien con los widgets AJAX y ese tipo de cosas, donde existe la posibilidad de que el diseño cambie radicalmente.

Answer 4

Un método popular y eficiente es enviar todas sus marcas adicionales (lo que necesite más adelante) a la parte inferior de su página en etiquetas de script, para que el navegador no muestre las marcas.

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

Luego puedes tomar tu marcado usando jQuery ...

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

Y analice los ejemplos de JS que utilicé utilizando un motor de plantillas, como el que se encuentra en Underscore.js (que recomiendo), o uno de los jQuery en esta respuesta: motores de plantillas jQuery

¡Diviértete!