DEJA TUS APLICACIONES EN LA LONA. PARTE 1. GENERALIDADES

< script src=”my own” title=”parte 1. generalidades” >

Luego de la tormenta, viene la calma, o eso dicen #porai

Luego de una disculpa más que merecida a vosotros que consultan este humilde blog, debo relatar (como debe ser ^^’ ) mi historia de amor y dolor con una librería que aunque pudiera parecer complicada, es un tanto más sencilla de usar de lo que parece y muy útil.

Se trata pues de Knockout.js XD .

Knockout es una librería que pretende ser una limpia y extensible base para construir interfaces de usuario con interacciones sofisticadas sin perderse en muchas líneas de código dedicadas a manejadores de eventos y actualizaciones manuales del DOM, bueno, eso es lo que dice en su página web 😳 .

Knockout se enfoca en 4 puntos clave:

  1. Enlaces (o bindings) declarativos de datos con elementos del DOM, con una sintaxis sencilla de entender.
  2. “Refrescamiento automático” de los bindings observados con el estado de la data de forma precisa.
  3. Detección de scopes, estableciendo relaciones entre el modelo de datos y la interfaz.
  4. Templates y componentes, que permiten amplificar y flexibilizar el desarrollo de interfaces de usuario sin alguna otra librería adicional.

Knockout.js utiliza un patrón de diseño MVVM (Modelo – Vista – Vista-Modelo), el cual permite la observación automática de valores y cambios de estado en el DOM, capturar eventos, y diseñar mecanismos de interacción complejos.

Como comentario personal, me gustó mucho la forma en que reduces código al momento de declarar atributos que manejan eventos automáticamente, y la manera en la que interactúan estos atributos con los datos. Aunque no es un concepto nuevo, el two-way data binding en una aplicación web actual es prácticamente impensable (claro, a menos que se trate de una página estática o una aplicación web progresiva).

Para ilustrar esto, pondré un ejemplo sencillo:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Ejemplo Knockout.js</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/6.1.2/picnic.min.css">
</head>
<body class="container">

<section class="flex two-300">
		<label><input type="text" placeholder="Ingresa un mensaje" data-bind="value: nombre, valueUpdate: 'keyup'"></label>
	</section>


<h2 data-bind="visible: nombre()">Hola <span data-bind="text: nombre"></span></h2>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
	<script>
		var ViewModel = function (nombre) {
			var self = this;
			self.nombre = ko.observable(nombre);
		}
		ko.applyBindings(new ViewModel("Mundo!"));
	</script>
</body>
</html>

El ejemplo es simple, solo cuando se escribe en el <input>, aparece un mensaje con lo que escribas, actualizado automáticamente. Algunos elementos que resaltar.

  • En la línea 11,  el atributo data-bind es el que usa Knockout para establecer los bindings necesarios, allí se utilizan uno o varios de esos bindings que puedes ver en su documentación.
    • El binding value permite mostrar cualquier valor en un elemento del DOM (generalmente un elemento <input> ).
    • El binding valueUpdate permite capturar el evento necesario para actualizar el valor de acuerdo al binding declarado. En este caso, capturará el evento 'keyup' de Javascript.
  • En la línea 15, hay dos bindings en dos elementos distintos:
    • El binding visible permite que un elemento del DOM sea mostrado según una condición, si ésta evalua a true, entonces el elemento del DOM es mostrado.
    • El binding text permite que un valor aparezca como texto plano dentro del DOM. La diferencia de éste con el
  • En la línea 19, se declara la Vista-Modelo como una función instanciable, en la que se colocarán todos los atributos que se observarán en la vista.
  • En la línea 20, se almacena el scope, que es un tipo de patrón muy común en una arquitectura MVVM.
  • En la línea 21, se declara un atributo que va a almacenar el estado del <input> donde se declaró el binding value.
  • En la línea 23, se aplican todos los bindings declarados sobre la vista.

Próximamente estaré publicando más cosas específicas sobre esta librería, así como su implementación en un proyecto más complejo. ¡A noquear aplicaciones! 😉

</script>

Anuncios