How to create your own ‘two way data-binding’ using only JavaScript Pt. 2
Hasta el momento se ha creado la estructura que soporta la interacción entre el modelo y la vista, pero la interacción como tal aún no existe. Para ello interviene un API de entidades y un control de enlace de datos.
04 Crear el control de enlace de datos:
El control de enlace de datos, tendrá como tarea renderizar en la tabla creada anteriormente, los datos obtenidos de la consulta en el servicio.
El objeto ‘GuiArray’ es una extensión del objeto del core de JS Array. Para realizar esta mágia, se debe crear una variable de tipo array y luego extender el prototipo del objeto. Para este caso el método push.
Este objeto recibe por parámetro una propiedad ‘key’ que es el nombre de la entidad, este nombre debe coincidir con el valor del atributo ‘data-entity’ que se encuentra en la tabla que creamos al principio.
Recuerda? <table data-entity=“countries” …>
Una vez que tenemos creada la variable tipo array — var array = [] — lo siguiente es extender el prototipo push y en dicho método push, estamos obteniendo un argumento llamado entity.
var entity = arguments[0];
Pero entonces que es esa variable entity? Cuando obtenemos la respuesta del servicio (Un listado de países) lo que realmente tenemos es un json, por tanto podemos iterarlo y agregar cada entidad país al array ‘GuiArray’. Ya vamos a llegar a esa parte. Por ahora hay que saber que ese argumento entity, es una entidad de la lista de países.
Ya con la entidad país llena, lo siguiente es con ayuda de jQuery buscar la tabla que tenga el atributo data-entity igual al nombre de la entidad y crearle una nueva fila con los valores de la entidad país. Fácil no? Una solución elegante para aprovechar los objetos de JS y crear la grilla.
Con ese control de enlace de datos ya tenemos una vía, de la doble vía de datos vinculantes “two way data-binding”. Es decir que con el modelo estamos actualizando la vista. de hecho esto no es cierto, no todavía. Lo siguiente es implementar el control de enlace de datos en el controlador.
En el controlador está recibiendo un tercer parámetro, el cual es una instancia del objeto ‘GuiArray’ con parámetro ‘countries’ que es el nombre de la entidad. Una vez que tenemos la instancia del array podemos usarlo en la respuesta del servicio.
Para este caso si la respuesta llega correctamente se invoca el método ‘loadCountries’ y se le pasa por parámetro el listado de países. Sino la excepción es controlada con un método ‘catchException’ y la escribe en un alert.
Si la respuesta es correcta y obtenemos el listado de paises, lo siguiente es llamar el método ‘addRow’ el cual crea una entidad de tipo country y la agrega al objeto array. Es precisamente en este punto donde ya tenemos la mitad del ejemplo, actualizamos la vista respecto al modelo.
Si en este punto esta conmigo o no — Si, lo sé, es posible que le de pereza leer toda la explicación — aquí dejo un ejemplo funcional de lo que vamos hasta ahora.
<<<<<<<<<<< Ver ejemplo funcional en plnkr >>>>>>>>>>
Que es lo genial en esta grilla personalizada? Lo genial, es que creando una instancia de un objeto tipo array, con solo llamar el método ‘push’ y pasarle la entidad, es suficiente para renderizar un nuevo registro en la grilla.
Lo cual significa que guardando este control como un core de controles, la creación de grillas es muy flexible, fácil y eficiente. Además que se puede extender tanto como uno desea. open-closed principle.
