DEJA TUS APLICACIONES EN LA LONA. PARTE 3. BINDINGS DE CONTROL DE FLUJO

< script src=”my own” title=”parte 3. bindings de control de flujo”>

¡Hola de nuevo  :mrgreen: !

En un post anterior, mostré los bindings de apariencia de los que dispone Knockout.js para mostrar texto, etiquetas HTML y clases CSS condicionales. En este post, mostraré los binding de control de flujo para datos. ¡Estoy indetenible!  😈

Por defecto, Knockout.js no tiene la posibilidad de manejar requests HTTP, ya que es una librería orientada al desarrollo de componentes de interfaz de usuario, ¿recuerdan? Sin embargo, eso no limita la posiblidad de que pueda integrarse junto con otras librerías para complementarle.

En este post, usaré Minified.js como librería para manejar los requests HTTP (podría ser jotacueri pero ya saben lo que pienso  🙄 ) hacia un servicio web que tenía hecho en JEXIA.

Bindings de control de flujo

La mayoría de las veces, es necesario utilizar rutinas que permita de forma dinámica, mostrar una tabla con una lista de datos obtenidos vía HTTP, AJAX, JSON u otra, considerando ademas que dichos atributos de esos datos influirán directamente en la manera en la que se muestra la tabla en su conjunto (ordenar por columna ascendente o descentente, búsqueda parcial, cosas así…  XD ), visibilidad y estilos CSS.

Knockout.js dispone de los siguientes bindings para controlar el flujo de datos:

  • El binding foreach permite iterar sobre una lista (generalmente un Array observable) y convertirla en datos asociados a elementos del DOM.
  • El binding if permite visibilidad condicional y desvinculación permanente o temporal de un elemento del DOM y tiene su binding equivalente con “lógica negativa”: ifnot.
  • El binding with permite navegar entre scopes de diferentes objetos dentro del árbol de objetos que exista en la lista o datos.

Veamos un ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo Knockout</title>
    <style>
        .no-visible {
            background-color: #D25349;
            color: white;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>ID Estado</th>
                <th>Estado</th>
                <th>Visibilidad</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: estados;">
            <!-- Condiciones arbitrarias para ilustrar el uso del binding "if" -->
            <tr data-bind="if: nombre_estado[0] === 'A' || id_estado > 12, css: {'no-visible': !visibilidad.esVisible};">
                <td style="text-align: center;"><span data-bind="text: id_estado;"></span></td>
                <td style="text-align: center;"><span data-bind="text: nombre_estado;"></span></td>
                <td style="text-align: center;" data-bind="with: visibilidad;"><span data-bind="text: esVisible ? 'Si' : 'No';"></span></td>
            </tr>
        </tbody>
    </table>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
    <script src="http://minifiedjs.com/download/minified.js"></script>
    <script src="control_flujo.js"></script>
</body>
</html>

En el archivo Javascript tenemos:

// Se instancia el core de minified con lo que se va a utilizar
var $ = require('minified').$,

// Usado para la conexión a JEXIA
		auth = {
			key: '59bdc1086ba8f9c1b11ad54652ab9413',
			secret: '38bda16cc69a8e6e50af89256e58e69dc725b63252a7c968'
		},
		baseUrl = 'http://f9315280-a20a-11e5-9220-c76468a2eab4.app.jexia.com';

// Autenticación con JEXIA
$.request('POST', baseUrl, auth).then(function(text) {
	var data = $.parseJSON(text),
			settings = {
				headers: {
					'Authorization': 'Bearer ' + data.token,
					'Access-Control-Allow-Origin': '*'
				}
			};
		return $.request('GET', baseUrl + '/estados', null, settings);
	}
).then(function (text) {
	var data = $.parseJSON(text);

// Para ilustración del binding "with"
	$(data).each(function (item) {
		item.visibilidad = {
			esVisible: Math.random() > 0.5
		}
	});

	ko.applyBindings(new ViewModel(data));
});

// Bindings a ser utilizados por Knockout.js
function ViewModel(data) {
	var self = this;

	self.estados = ko.observableArray(data);
}

En la línea 22 del HTML, aplicamos el binding foreach, el cual opera sobre el atributo estados, definido en el ViewModel, luego, en la línea 24, definimos condiciones arbitrarias para ilustrar el uso del binding if. Finalmente, en la línea 27, aplicamos el binding with, que permite acceder al atributo esVisible desde el scope del atributo visibilidad, definido en el también en el VIewModel.

Poco hacemos en el Javascript aparte de manejar los requests HTTP a la lista en JEXIA y pasárselos al ViewModel. En la línea 39, definimos que el array de datos sea observable, esto significa que cada valor del array cambiará según los bindings que hayamos definido en el mismo o en otro ViewModel, lo cual permite realizar acciones complejas como ordenamientos según eventos o búsquedas parciales.

Seguiremos informando, ¡hasta la próxima pelea!  😉 .

</script>

Anuncios