En el capítulo anterior hicimos una manipulación no reactiva, es decir, común y corriente de elementos del DOM, en este capítulo vemos como será hacer la transición de una manipulación común a una manipulación de la interfaz basada en un estado (datos de nuestra aplicación en cierto momento).
Vamos a crear un archivo denominado 01_ui-basada-estado.html, y dentro de este archivo vamos a crear una variable basada en el estado, a la que los desarrolladores denominan state. Tendremos que tener un mecanismo que genere esa interfaz basada en el estado, es decir, un template UI, por lo que crearemos una variable que permita trabajar un template UI, se tratará de una función flecha que va a interactuar con las listas que tiene el estado, es decir, con la propiedad todoList, y por cada elemento que tenga, va a generar una <li>. También necesitamos un proceso que va a hacer el renderizado UI. Y lo último es actualizar el estado (state) y la UI.
El siguiente paso que queda es hacer que nuestro estado sea realmente reactivo.
Vamos un crear un nuevo archivo 01_ui-basada-estado.html, que va a tener la siguiente sintaxis.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interfaz de usuario basada en el estado</title>
</head>
<body>
<h1>Interfaz de usuario basada en el estado</h1>
<form id="todo-form">
<input type="text" id="todo-item" placeholder="Tarea por hacer" />
<input type="submit" value="Agregar" />
</form>
<h2>Lista de tareas</h2>
<ul id="todo-list"></ul>
<script>
const d = document;
// El State
const state = {
todoList: [],
};
// Template
const template = () => {
if (state.todoList.length < 1) {
return `<p><em>Lista sin tareas por hacer</em></p>`;
}
let todos = state.todoList.map((item) => `<li>${item}</li>`).join("");
return todos;
};
// Render UI
const render = () => {
console.log(state);
const $list = d.getElementById("todo-list");
if (!$list) return;
$list.innerHTML = template();
};
d.addEventListener("DOMContentLoaded", render);
d.addEventListener("submit", (e) => {
if (!e.target.matches("#todo-form")) return false;
e.preventDefault();
const $item = d.getElementById("todo-item");
if (!$item) return;
// Actualizar el State y la UI
state.todoList.push($item.value);
render();
// Limpiar el input
$item.value = "";
$item.focus();
});
</script>
</body>
</html>