Lo que necesitas es un poco de plantilla.

 

 

 


Índice
  1. El HTML era algo como esto…
  2. El JavaScript era así…
  3. Aquí no pasa nada inválido.
  4. Arreglemoslo con una sola frase.
  5. La expectativa era 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/html

El 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:






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Lo que necesitas es un poco de plantilla.

Lo que necesitas es un poco de plantilla.

El HTML era algo como esto…El JavaScript era así…Aquí no pasa nada inválido.Arreglemoslo con una sola frase.La expectativa era plantilla.Tal vez te pued

programar

es

https://pseint.es/static/images/programar-lo-que-necesitas-es-un-poco-de-plantilla-1634-0.jpg

2024-06-13

 

Lo que necesitas es un poco de plantilla.
Lo que necesitas es un poco de plantilla.

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences