BASE DE DATOS ¿EN EL NAVEGADOR?. PARTE 2. LA PRÁCTICA

<script src=”my own” title=”base de datos en el navegador. parte 2. la practica”>

Uf… Como me costó escribir este post…

Después de una semana de locura por el fuerte laburo, por fín pude sacar un tiempo para completar el post anterior. Es un ejemplo básico de una lista de tareas, quedando pendiente subir este código al Gato-Pulpo:

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Uso de Dexie.js con IndexedDB</title>
	<style> li{margin-bottom: 10px;} </style>
	<script src="jquery-1.11.1.min.js"></script>
	<script src="Dexie.js"></script>
	<script src="crud.js"></script>
</head>
<body>
  <h1>Lista de Tareas</h1>
  <form>
  	<input type="text" size="30" placeholder="Agrega una nueva tarea" id="tarea">
  </form>
  <ul id="listaTareas"></ul>
</body>
</html>

Código de crud.js (comentado):

$(function() {

	//Estructura de datos del objeto global Tarea
	var Tarea = function(descripcion){
		this.descripcion = descripcion;
		this.fecha = new Date().toString().substring(3,16);
	};

	//Variables globales: instancia de base de datos y "cacheado" de elementos DOM
	var db = new Dexie("TodoAPP"),
			tarea = $("#tarea"),
			listaTareas = $('#listaTareas');

	//Creación del esquema de Base de Datos (en SQL sería una tabla)
	db.version(1)
		.stores({
			tareas: '++id, tarea, fecha' //++id simula autoincremento
		});

	//Apertura de la base de datos, encadenando la promesa de refrescar la página
	db.open()
		.then(refrescar);

	//Añadir listener para añadir registros a la Base de Datos
	$("form").on('submit', agregarTarea);

	//Añade listeners del evento click de forma asíncrona
	function escucharBotones(){
		$("button").each(function(){
			$(this).click(function(){
				db.tareas.where('id')
					.equals(parseInt($(this).attr("id"), 10)) //attr("id") devuelve String
					.delete()
					.then(refrescar);
			});
		});
	}

	//Nuevo registro es añadido a la Base de Datos
	function agregarTarea(event) {
		event.preventDefault();
		db.tareas.put(new Tarea(tarea.val()))
			.then(function() {
				tarea.val('');	//Se vacia el "input"
			})
			.then(refrescar);
	}

	function refrescar() {
		return db.tareas.toArray() //retorna todos los registros como un Array
			.then(listarTareas)
			.then(escucharBotones);
	}

	//Agrega a la lista todos los elementos actualizados
	function listarTareas(tareas) {
		var html = '';
		listaTareas.html('');
		tareas.forEach(function(tarea) {
			html += nuevaTarea(tarea);
		});
		listaTareas.append(html);
	}

	//Cada elemento de la Base de Datos es asignado como elementos HTML
	function nuevaTarea(Tarea) {
		return '<li>'+Tarea.descripcion+' <em>--Creada: '+Tarea.fecha+'</em><button id="'+Tarea.id+'">Completada</button></li>';
	}

});

Este código así descrito, usa la API Promises de Javascript ES6. Visita el enlace para más información. Adicionalmente, basé este código en esta implementación.

Me retiro, de vuelta al laburo 😉 .
</script>

Anuncios