Javascript — Templates (Parte III)

Plantillas Reactivas

Ya hemos visto en las entregas anteriores el uso de Plantillas con Javascript y la Navegación entre plantillas, para poder completar esta serie de conceptos veremos el uso de “Plantillas Reactivas” las cuales se refieren a plantillas HTML capaces de reaccionar aisladamente a su propia interfaz.

Lo primero será definir la plantilla o vista que queremos generar para nuestra aplicación. Una vez hecho esto deberemos agregar una etiqueta <script> a nuestra plantilla, para poder controlar los elementos definidos en la plantilla. Se recomienda utilizar un nodo padre <div> para tener mayor control de los elementos y acceso más rápido. Ahora utilizando document.currentScript podremos acceder a la etiqueta de código que se va a ejecutar, por lo que document.currentScript.parentNode nos debería devolver el elemento <div> que contiene a nuestro script. De esta manera ya podemos acceder a los elementos hijos del contenedor principal y realizar cualquier lógica sobre nuestros elementos de forma aislada y reutilizable.

El siguiente ejemplo muestra una plantilla sencilla con una caja para escribir texto, una caja para mostrar texto y un script que aisla una función autoejecutable la cual recupera el elemento padre al código y las cajas de texto, luego controla el evento de la caja para escribir texto de tal modo que recupera su texto, lo inverte y lo muestra en la otra caja. Finalmente se monta la misma plantilla dos veces, cada una controlando su propia lógica y vista de forma independiente.

Está es una forma de crear aplicaciones reactivas altamente reutilizables sin recurrir a ningún framework.

TODO

  • Crea una plantilla con un formulario para iniciar sesión con su lógica incrustada.
  • Piensa en una forma de comunicar datos entre plantillas sin definir variables globales.

Es momento de que decidas si te ha gustado esta última entrega, ahora ya puedes ahorrarte mucho dinero y tiempo en frameworks reactivos, por lo que aquí te dejo un link para seguir apoyando a la causa :D

Programacion Holistica

Temas de programación de alto nivel

Alan Badillo Salas

Written by

L. Matemáticas Aplicadas UAM-Cuajimalpa. M. en Inteligencia Artificial IPN-CIDETEC. Desarrollador Full Stack MEAN/MERN. Data Scientist.

Programacion Holistica

Temas de programación de alto nivel

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade