Digamos que uno tiene una plantilla html como esta:
<template id="template"> <div id="A"></div> <div id="B"></div> <div id="C"></div> <div id="D"></div> <div id="E"></div> <div id="F"></div> </template>Ahora, cuando uno clona para agregarlo al DOM con JavaScript, no he encontrado una forma "agradable" de completar todos los espacios en blanco, esto parece muy detallado:
const object = {A:1, B:2, C:3, D:4, E:5, F:6}; const template = document.getElementById("template") let newThing = template.cloneNode(true); newThing.getElementById("A").innerHTML = object.A; newThing.getElementById("B").innerHTML = object.B; newThing.getElementById("C").innerHTML = object.C; newThing.getElementById("D").innerHTML = object.D; newThing.getElementById("E").innerHTML = object.E; newThing.getElementById("F").innerHTML = object.F; container.appendChild(newThing); Entiendo que uno podría soltar la <template> y moverlo todo a JavaScript, pero dudo, porque me gusta mantener HTML en archivos HTML, luego tienes pelusa en el editor de texto, etc.
Para mí, esta no es una gran solución ya que ahora el HTML vive en archivos de script:
const newThing = ` <div> <div>${object.A}</div> <div>${object.B}</div> <div>${object.C}</div> <div>${object.D}</div> <div>${object.E}</div> <div>${object.F}</div> </div> ¿Hay una mejor manera de representar una plantilla con un objeto de datos? He leído sobre lithtml , pero una biblioteca completa para hacer esta pequeña cosa parece una exageración.
Los pares clave-valor del objeto se pueden usar directamente dentro de un bucle for-in . Esto permite que el marcado almacenado en un objeto de cualquier longitud se asigne a una colección html donde el ID de cada elemento es el mismo que el valor clave del objeto de datos correspondiente.
for (const property in object) { newThing.getElementById(property).innerHTML = object[property]; } En el código anterior, 'propiedad' es el nombre clave de cada una de las propiedades de los objetos, por lo que object[property] es una referencia directa a su valor.
He usado esto en un fragmento de trabajo a continuación para representar un html arbitrario almacenado en un objeto:
const container = document.getElementById("container"); const object = { A:"<h2>my heading</h2>", B:"<a href='https://www.google.com'>Google Search</a>", C:"<p>Computing is enjoyable <i>and</i> frustrating<p>", D:"<div> what\'s your name ? <input type='text'></div>", E:"<p>another paragraph</p>", F:"<h2>goodbye!</h2>" } const template = document.getElementById("template") let newThing = template.content.cloneNode(true); for (const property in object) { newThing.getElementById(property).innerHTML = object[property]; } container.appendChild(newThing); <template id="template"> <div id="A"></div> <div id="B"></div> <div id="C"></div> <div id="D"></div> <div id="E"></div> <div id="F"></div> </template> <div id="container"></div>Si lo desea, puede crear una plantilla con una ID en su HTML de la siguiente manera:
<template id="myTemplate"> <div>${object.A}</div> <div>${object.B}</div> <div>${object.C}</div> <div>${object.D}</div> <div>${object.E}</div> <div>${object.F}</div> </div> Y luego llame a eval para analizarlo
eval('`' + document.getElementById("myTemplate").innerHTML + '`')Esto devuelve el código formateado que luego puede colocar en su documento
Eval es bastante peligroso, y si se usa incorrectamente, alguien puede ejecutar comandos peligrosos en nombre de su sitio web. Si se trata de un proyecto personal, puede usarlo si lo desea, pero preferiblemente no en un sitio web de uso público a gran escala.