Data Binding en jQuery con Chain.js

28 Apr 2011


Seamos sinceros: jQuery es divertido y es (una) de las librerías más usadas de JavaScript en nuestros días. A la hora de trabajar con jQuery, y luego de haber trabado con Flex por un par de meses, se me vino algo a la cabeza: en Flex cuando queremos que un elemento esté vinculado directamente a una variable del sistema debemos utilizar Data Bindings, lo que lo hace muy práctico a la hora de trabajar, ya que si queremos actualizar los datos desplegados en una lista, sólo tenemos que actualizar la variable y ya estaría todo configurado.

Buscando una solución similar me topé con chain.js, un plugin de jQuery que permite hacer data binding en jQuery, de una manera bastante similar a lo que estoy acostumbrado en Flex. Su uso, luego de juntar la librería en nuestro código, es bastante simple, pero es más fácil de explicar con un ejemplo práctico. Imaginémonos que tenemos un dropdown con una lista de personas que se actualizarían conforme el flujo de la aplicación. Si quisiéramos hacer esto en jQuery pelao’ tuvieramos que hacer más de lo normal o hacer que nuestro servicio directamente devuelva HTML. Con chain.js es más fácil: En este HTML tenemos un dropdown con un id persons, el cual quisieramos actualizar directamente desde nuestro código de JavaScript. Lo que podemos hacer es “bindearle” directamente un array a esta aplicación: Viendo el código, al principio tendremos 4 personas en nuestro dropdown, pero luego de apretar el botón y al llamar a la función “actualizar” vemos que hacemos un “replace” de los valores con nuevos datos. Podemos pensar que este botón fácilmente podría hacer una llamada a un servicio, lo que retornaría un JSON que luego de parsear nos devolvería un arreglo y este arreglo lo reemplazaríamos directamente en nuestro código. Obviamente todo esto tiene miles de posibilidades, pero esto es un breve vistazo del buen uso que le podríamos dar al chain.js. ¡Hora de jugar!


Demóstenes García G.

Ingeniero Electrónico con experiencia en Ingeniería y Desarrollo de Software. Agilista, interesado en Analítica y Ciencia de Datos. Co-fundador en Pixmat, CIO en IFARHU. Twitter.