Un tipo me escribió el otro día. Tenía algo de HTML, CSS y JavaScript, y simplemente no se estaba comportando como él 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 algún grado de conocimiento web, podemos ver esto y ver por qué no funciona como él 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 html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://css-tricks.com/what-ya-need-there-is-a-bit-of-templating/test.css">
<script src="https://css-tricks.com/what-ya-need-there-is-a-bit-of-templating/data.js"></script>
</head>
<body>
<section>
<div>{company_name}</div>
</section>
</body>
</html>El JavaScript era así …
var company_data = {
"{company_name}" : "SOME COMPANY",
};No hay nada inválido sucediendo aquí.
Eso es todo un código perfectamente válido. Está vinculado a la derecha. Funcionará. Simplemente no hace nada más que renderizar {company_name} a la pantalla. La expectativa es que muestre ALGUNA EMPRESA en la pantalla, reemplazando el {company_name} marcador de posición con los datos del archivo JavaScript.
Arreglemoslo con una sola línea.
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 hacer eso 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 o resistente, pero bueno, tampoco es pensar demasiado ni usar herramientas en exceso.
La expectativa fue la plantilla
Creo que podemos ver en este punto que lo que él esperaba que sucediera es que este tipo de plantilla sucediera automáticamente. Proporcione un objeto con claves que coincidan con lo que está en el HTML, el contenido en ese HTML se intercambia automáticamente. Simplemente no funciona de esa manera con tecnologías web sin procesar.
No es broma, hay cientos de formas de manejar esto. Aquí hay algunos que me vienen a la cabeza:
- Utilice un lenguaje de plantillas como Handlebars o Moustache
- Use un generador de sitios estáticos como Eleventy, que usa Liquid de forma predeterminada
- Hacer un HTML
<template>y escribe tu propio script para usarlo - Hacer un componente web
- En su lugar, use un lenguaje de back-end o un lenguaje como Nunjucks para procesar con anticipación
- Utilice un preprocesador como Pug
Como preferencia general, diría que lo ideal es hacer plantillas en el lado del servidor o durante una compilación: ¿por qué meterse con el DOM si no es necesario?
Pero solo para ignorar ese consejo por un segundo, aquí hay un ejemplo de cómo hacerlo del lado del cliente con Handlebars, solo para que el amigo del correo electrónico original tenga un ejemplo práctico de cómo puede funcionar: