Cargar plantilla HTML con JavaScript

Estoy luchando por encontrar una solución limpia a mi problema y me preguntaba si alguien podría ofrecer algunos consejos.Cargar plantilla HTML con JavaScript

Tengo "templates.html" que contiene una colección de fragmentos de HTML que quiero cargar en JavaScript y usar. ¿Cuál es una buena manera de acceder a las plantillas/fragmentos teniendo en cuenta que templates.html no es un documento DOM cargado?

Estaba pensando en utilizar document.open para crear un DOM para acceder, pero creo que esto tiene problemas en ciertos navegadores.

Fuente

2011-06-23 iancrowther

Puede cargar el HTML en un div oculto y entonces tendrá un acceso DOM la forma más fácil de cargar el html en un DIV se utiliza la carga jQuery: http://api.jquery.com/load/

Fuente

2011-06-23 08:25:39 kleinohad

Gracias, Esto hizo el truco exactamente como se requiere. Ian – iancrowther

Algún código de ejemplo siempre es bueno.Es por eso que prefiero la respuesta de peterp –

Uso jQuery y el .load() (http://api.jquery.com/load/ ) método para inyectar el documento cargado en el DOM.

$(function() { 
    $('#content').load('/templates.html'); 
});

Fuente

2011-06-23 08:27:40 peterp

gracias por el código de muestra – iancrowther

Esta fue la solución para mí, ¡simplemente no olvides agregar la función de devolución de llamada! porque si va a agregar funcionalidad, tal vez el contenido aún no esté cargado, por lo que es mejor esperarlo. $ ('# content'). Load ('/ templates.html', function() { // Cosas que hacer cuando se carga el html }); – epergo

otra manera de hacer esto es mediante requireJS.

require (['text!template_name'], function(yourTemplate) { 
    // do stuff in here with yourTemplate dinamically load 
}

Fuente

2012-06-23 21:25:39

Hola Andrei, gracias por la respuesta, realmente no he usado requirejs, pero estaba al tanto, ahora tengo una razón para jugar .. http://www.bennadel.com/blog/2285-Writing-A-RequireJS- Plugin-To-Load-Remote-jQuery-Templates.htm – iancrowther

puedes cargar dinámicamente muchas cosas con él, es muy útil. Lo uso para código de coffeescript y plantillas. –

Por simple que requiere que puede probar:

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState === 4) {  
     //do something with xhr.responseText 
    } 
};  
xhr.open('GET', '/template.html'); 
xhr.send();

Fuente

2013-12-20 13:38:37 IvanM

se podría cargar la plantilla asíncrono usando jquery ajax

$.get("/html/template01.html") 
.done((data) => { 
    console.info(data); // output the content of the html file 
});

Fuente

2016-06-09 04:04:39 Moes

¿Es posible conectar esa plantilla "template01.html" a un controlador (definido en controller.js (aplicación Ionic/Cordova)) sin un estado? –

Esto es un poco viejo, pero ya que "la plantilla HTML de carga con JavaScript "hoy en día debería referirse a la carga de un HTMLTemplateElement aquí hay un enfoque más moderno para cargar plantillas nativas con javascript que también funciona para su caso de uso.

En primer lugar, usar <template> ya es mejor que cargar HTML en un DIV oculto porque las plantillas son internas y no muestran el contenido. Puede hacer que las plantillas se representen desde el principio y usarlas cuando lo necesite.

<html> 
<head> 
    <template>My template</template> 
</head> 
<body> 
    <script> 
    document.body.append(
    document.importNode(
     document.querySelector('template').content, 
     true 
    ) 
) 
    </script> 
</body> 
</html>

O créelos dinámicamente.

const template = document.createElement('template') 
// modify the template's content 
template.content.append(document.createElement('div')) 
// add it to the document so it is parsed and ready to be used 
document.head.append(template)

Porque queremos que el contenido de la plantilla que se construirá sobre la base de un texto que obtenemos de la red, tenemos que analizarlo y añadirlo a nuestra template.content.

const text = fetchTemplateSomehowAsText('my-template.html') 
const parsedDocument = new DOMParser().parseFromString(text, 'text/html') 
template.content.append(parsedDocument.querySelector('#my-snippet'))

Si my-template.html ya viene envuelto en la etiqueta <template> podemos evitar la parte de crear el elemento de plantilla de forma manual debido a que el DOMParser ya se crea el elemento de plantilla para nosotros.

document.head.append(
    new DOMParser().parseFromString(text, 'text/html') 
    .querySelector('template') 
) 
)

This es un fragmento que he estado usando para cargar plantillas en el documento de forma dinámica que utiliza lo que acabo de explicar.

Fuente

2017-05-21 11:17:54 olanod

Cargar plantilla HTML con JavaScript

Respuesta

Cuestiones relacionadas