jQuery UI: ¿la mejor forma de cargar etiquetas HTML?

votos
2

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

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

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

Publicado el 09/12/2008 a las 23:25
fuente por usuario
En otros idiomas...                            


4 respuestas

votos
6

Algo que está bastante bien por hacer es esto:

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

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

Respondida el 09/12/2008 a las 23:49
fuente por usuario

votos
2

Si tiene una gran cantidad de HTML complejo y no desea manejar cadenas codificadas en su código JavaScript, puede colocarlo en un archivo HTML separado y usar la 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.

Respondida el 21/09/2009 a las 23:45
fuente por usuario

votos
1

Muchas veces, para plantillas realmente complejas, solo 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 solo realiza un reemplazo en esos cuando las cosas vuelvan. De esta forma, el marcado se separa un poco 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.

Respondida el 21/09/2009 a las 23:19
fuente por usuario

votos
0

Un método popular y eficaz es a la salida de la totalidad de su margen de beneficio adicional (lo que puede necesitar más adelante) a la parte inferior de la página de etiquetas de script, por lo que el margen de beneficio no se representa por el navegador.

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

A continuación, puede agarrar su margen de beneficio usando jQuery ...

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

Y analizar esos ejemplos JS tiré allí usando un motor de plantillas, como el de Underscore.js (que recomiendo), o uno de los jQuery en esta respuesta: motores de plantillas jQuery

¡Que te diviertas!

Respondida el 27/01/2013 a las 23:46
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more