Lo que necesitas es un poco de plantilla.
Un tipo me escribió el otro día. Tenía algo de HTML, CSS y JavaScript, y simplemente no se comportaba como pensaba que debería hacerlo. El HTML tenía algunos marcadores de posición y JavaScript tenía algunos datos, y se suponía que los datos llenarían los marcadores de posición.
Para aquellos de nosotros con cierto grado de conocimiento web, podemos mirar esto y ver por qué no funciona como pensaba. Pero creo que también es valioso tratar de ver las cosas desde esa perspectiva y luego buscar soluciones que, con suerte, sean tan simples como parece ser el problema original.
El HTML era algo como esto…
!DOCTYPE htmlhtmlhead meta charset="utf-8" titleTest/title link rel="stylesheet" href="test.css" script src="data.js"/script/headbody section div{company_name}/div /section/body/htmlEl JavaScript era así…
var company_data = { "{company_name}" : "SOME COMPANY",};Aquí no pasa nada inválido.
Todo eso es código perfectamente válido. Está bien conectado. Funcionará. Simplemente no hace nada más que renderizar {company_name}en la pantalla. La expectativa es que, en su lugar, muestre ALGUNA EMPRESA en la pantalla, reemplazando el {company_name}marcador de posición con los datos del archivo JavaScript.
Arreglemoslo con una sola frase.
En este escenario exacto, para mostrar el nombre correcto de la empresa, debemos seleccionar ese elemento en el DOM y reemplazar su contenido con nuestros datos. Podríamos hacerlo agregando esta línea adicional al JavaScript:
var company_data = { "{company_name}": "SOME COMPANY"};document.querySelector("div").innerHTML = company_data["{company_name}"]; Eso no es particularmente reutilizable ni resistente, pero bueno, tampoco es pensar demasiado ni utilizar demasiadas herramientas.
La expectativa era plantilla.
Creo que podemos ver en este punto que lo que esperaba que sucediera es que este tipo de plantillas se hizo automáticamente. Proporcione un objeto con claves que coinciden con lo que hay en el HTML, el contenido de ese HTML se intercambia automáticamente. Simplemente no funciona de esa manera con las tecnologías web sin formato.
No es broma, hay cientos de maneras de manejar esto. Aquí hay algunos que se me vienen a la cabeza:
- Utilice un lenguaje de plantillas como Manillar o Bigote
- Utilice un generador de sitios estáticos como Eleventy, que utiliza líquido de forma predeterminada.
- Crea un HTML
templatey escribe tu propio script para usarlo - Crear un componente web
- Utilice un lenguaje de back-end en su lugar o un lenguaje como Nunjucks para procesar con anticipación
- Utilice un preprocesador como Pug
Como preferencia general, diría que lo ideal es crear plantillas en el lado del servidor o durante una compilación. ¿Por qué meterse con el DOM si no es necesario?
Pero para ignorar ese consejo por un segundo, aquí hay un ejemplo de cómo hacerlo del lado del cliente con Manubrios, para que el chico del correo electrónico original tenga un ejemplo práctico de cómo puede funcionar:
Deja un comentario