Data Binding no es más que la unión de datos dinámicos ya sea texto o HTML en las diferentes partes del árbol DOM de nuestro documento donde tenemos Knockout.js funcionando, esto nos permite generar contenido dinámico proveniente de las vistas y los modelos.
Este concepto puede encontrarse en una gran cantidad de frameworks de desarrollo para JavaScript ya que es una forma muy efectiva de poder expresar la lógica de desarrollo, por lo que es de vital importancia que entendamos como funciona y como nos puede hacer la vida más sencilla a la hora de hacer nuestras aplicaciones.
La mejor forma de ver el Data Binding es con un ejemplo, veamos en el siguiente código como hemos creado un documento HTML donde incluimos a Knockout.js, luego en nuestro body hemos creado una etiqueta H1 en ella hacemos un data-bind de HTML, esto quiere decir que está esperando código HTML.
En la parte JavaScript simplemente lo que hicimos fue crear una vista-modelo y en ella definir unos atributos para poder trabajar con ella. Lo interesante es que esto nos permite pasar los datos desde nuestra vista-modelo a una porción del HTML. Veamos como luce nuestro código:
Aquí vemos como hemos construido un método que devuelve el nombre y un poco de HTML para darle estilo, esto hace que podamos tener un abanico infinito de posibilidades, pero quizás lo que más resalte es que podemos aplicar un data binding a casi cualquier elemento. Así podemos enviar texto, HTML, etc.
Pero no solo lo que nos permite es imprimir texto al usuario, también podemos incorporar CSS, clases y atributos a nuestras etiquetas HTML, permitiendo que controlemos casi todo el aspecto de nuestra página sin necesidad de establecer valores estáticos.
Veamos en el siguiente ejemplo como le damos una clase en especial a una etiqueta HTML, la idea es que podamos generar estilos dinámicos sin necesidad de intervenir cuando tengamos una aplicación que busca en una fuente REST, sin embargo en este caso para simplificar vamos a cargar solo un componente de forma dinámica:
Si ejecutamos nuestro nuevo ejemplo, el resultado en nuestro navegador es el siguiente:
![data-binding-knockoutjs-2.jpg]()
Prestemos especial atención a la parte del debugger de HTML del navegador, aquí vemos donde los elementos del data binding se trasladaron efectivamente a la etiqueta.
Hay otras características que podemos utilizar con el data binding, una de ellas son los condicionales, es decir, podemos colocar un elemento u otro dentro de nuestras etiquetas HTML tomando en cuenta las diferentes propiedades de nuestro modelo. Veamos el siguiente código donde empleamos un ejemplo de este estilo:
Vamos a ejecutar en el navegador el ejemplo para ver su resultado:
Un ejercicio interesante sería si pueden hacer el cambio del id por otro valor para que confirmen el funcionamiento, es por ello que se lo dejamos de tarea.
Algo muy importante que debemos tener en cuenta es el contexto de nuestros elementos, esto es debido a que Knockout.js utiliza una estructura jerárquica de padre/hijo para manejar las diferentes propiedades que obtenemos de las vistas modelos.
Esto significa que siempre estamos trabajando tomando como base a un padre, y así podemos acceder a sus propiedades, generando así propiedades del hijo que se diferencian de otros hijos que estén en su mismo nivel, logrando así poder incorporar diferentes valores.
Como todo es relativo al contexto vemos que pudimos utilizar en los ejemplos anteriores el data bind text sin necesidad de indicar a quien pertenece, ya que al suceder esto, Knockout.js asume inmediatamente el contexto del hijo actual. Veamos a continuación los diferentes tipos de contexto que podemos manejar en nuestra aplicación:
Cuando necesitamos iterar sobre una cantidad de elementos, es el momento en el que debemos utilizar el bucle foreach, este va a recorrer un array o un listado de elementos y de esta forma podremos construir nuestra lista en el documento HTML.
En el siguiente ejemplo vamos a tener una propiedad llamada libros en nuestra vista modelo y luego vamos a recorrerla con un foreach haciendo uso de una de las variables de contexto, en este caso de $data, veamos:
Con esto finalizamos este tutorial, hemos aprendido y tenido un contacto más a fondo con Knockout.js, es importante entender de forma muy profunda y sólida los conceptos de lo que es el data binding, ya es la manera en la que utilizaremos los datos, atributos y propiedades de nuestras vistas modelos. También pudimos entender un concepto muy importante como lo es el contexto, ahora podemos entender cómo se diferencian los diferentes elementos y el por qué Knockout.js sabe cuándo obtener unos datos sobre otros, y es porque siempre sabe el contexto de nuestros elementos.
Este concepto puede encontrarse en una gran cantidad de frameworks de desarrollo para JavaScript ya que es una forma muy efectiva de poder expresar la lógica de desarrollo, por lo que es de vital importancia que entendamos como funciona y como nos puede hacer la vida más sencilla a la hora de hacer nuestras aplicaciones.
Requisitos
El principal requisito es poder ejecutar Knockout.js ya sea que lo hayamos descargado o que lo incluyamos desde una CDN. También vamos a necesitar un servidor estilo Apache para servir nuestra página, y un editor de texto como Sublime Text o NotePad ++ para crear los documentos que llevaran nuestras aplicaciones.
Un ejemplo para iniciar
La mejor forma de ver el Data Binding es con un ejemplo, veamos en el siguiente código como hemos creado un documento HTML donde incluimos a Knockout.js, luego en nuestro body hemos creado una etiqueta H1 en ella hacemos un data-bind de HTML, esto quiere decir que está esperando código HTML.
En la parte JavaScript simplemente lo que hicimos fue crear una vista-modelo y en ella definir unos atributos para poder trabajar con ella. Lo interesante es que esto nos permite pasar los datos desde nuestra vista-modelo a una porción del HTML. Veamos como luce nuestro código:
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <title>Data Binding en knockout.js</title> </head><body> <h1 data-bind="html: obtenerNombre()"></h1> <script src="js/knockout-3.3.0.js" type="text/javascript"></script> <script> function VistaModelo() { var self = this; self.nombre = 'Solvetic'; self.obtenerNombre = function() { return 'Hola <em>' + self.nombre + '</em> ¿Cómo estás?'; }; }; var vistamodelo = new VistaModelo(); ko.applyBindings(VistaModelo); </script> </body></html>Al llamar a nuestro documento desde nuestro navegador obtenemos el siguiente resultado:
Aquí vemos como hemos construido un método que devuelve el nombre y un poco de HTML para darle estilo, esto hace que podamos tener un abanico infinito de posibilidades, pero quizás lo que más resalte es que podemos aplicar un data binding a casi cualquier elemento. Así podemos enviar texto, HTML, etc.
Pero no solo lo que nos permite es imprimir texto al usuario, también podemos incorporar CSS, clases y atributos a nuestras etiquetas HTML, permitiendo que controlemos casi todo el aspecto de nuestra página sin necesidad de establecer valores estáticos.
Veamos en el siguiente ejemplo como le damos una clase en especial a una etiqueta HTML, la idea es que podamos generar estilos dinámicos sin necesidad de intervenir cuando tengamos una aplicación que busca en una fuente REST, sin embargo en este caso para simplificar vamos a cargar solo un componente de forma dinámica:
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <title>Data Binding en knockout.js</title></head><body> <p data-bind="style: { marginBottom: 0, paddingBottom: '1em', color: 'red' }, css: 'clase', text: texto"></p> <script src="js/knockout-3.3.0.js" type="text/javascript"></script> <script> function VistaModelo() { var self = this; self.texto = 'Este texto lleva un estilo proveniente de un Data Binding'; }; var vistamodelo = new VistaModelo(); ko.applyBindings(VistaModelo); </script> </body></html>Notamos entonces como podemos pasar un componente style el cual nos va a definir el aspecto del texto, también pudimos agregar una clase y finalmente llamamos a nuestro texto desde el modelo, notamos también que todo esto lo hacemos en un mismo data binding, únicamente separando los diferentes elementos con comas.Si ejecutamos nuestro nuevo ejemplo, el resultado en nuestro navegador es el siguiente:
Prestemos especial atención a la parte del debugger de HTML del navegador, aquí vemos donde los elementos del data binding se trasladaron efectivamente a la etiqueta.
Utilizar condiciones
Hay otras características que podemos utilizar con el data binding, una de ellas son los condicionales, es decir, podemos colocar un elemento u otro dentro de nuestras etiquetas HTML tomando en cuenta las diferentes propiedades de nuestro modelo. Veamos el siguiente código donde empleamos un ejemplo de este estilo:
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <title>Data Binding condicional</title> </head><body> <p data-bind="text: (id==0)? 'Hola': 'Adios'"></p> <script src="js/knockout-3.3.0.js" type="text/javascript"></script> <script> function VistaModelo() { var self = this; self.id = 0; }; var vistamodelo = new VistaModelo(); ko.applyBindings(VistaModelo); </script> </body></html>En nuestra vista modelo hemos definido un atributo llamado id que lo igualamos a 0, luego en nuestro HTML en la sección del data bind hemos definido un operador ternario, donde especificamos si el id de la vista modelo es 0 imprime 'Hola' en caso contrario imprime 'Adios'.Vamos a ejecutar en el navegador el ejemplo para ver su resultado:
Un ejercicio interesante sería si pueden hacer el cambio del id por otro valor para que confirmen el funcionamiento, es por ello que se lo dejamos de tarea.
El contexto
Algo muy importante que debemos tener en cuenta es el contexto de nuestros elementos, esto es debido a que Knockout.js utiliza una estructura jerárquica de padre/hijo para manejar las diferentes propiedades que obtenemos de las vistas modelos.
Esto significa que siempre estamos trabajando tomando como base a un padre, y así podemos acceder a sus propiedades, generando así propiedades del hijo que se diferencian de otros hijos que estén en su mismo nivel, logrando así poder incorporar diferentes valores.
Como todo es relativo al contexto vemos que pudimos utilizar en los ejemplos anteriores el data bind text sin necesidad de indicar a quien pertenece, ya que al suceder esto, Knockout.js asume inmediatamente el contexto del hijo actual. Veamos a continuación los diferentes tipos de contexto que podemos manejar en nuestra aplicación:
$root
Es el contexto principal, es de donde deriva nuestra vista modelo, al ser invocado desde cualquier parte de nuestra aplicación siempre buscará la relación más jerárquica y de mayor precedencia en nuestra estructura, es especial para cuando tenemos muchos hijos y queremos algo del padre mayor.
$parent
Funciona de forma similar a $root, con la diferencia que solo se refiere al padre inmediato de nuestro elemento, por lo que su alcance es limitado a eso, es muy utilizado cuando trabajamos con ciclos foreach para generar muchos hijos.
$parents
La adición del plural a este contexto nos indica que construimos una especie de arreglo o array que contiene un índice por cada uno de los padres del hijo desde donde lo llamemos, así $parents[0] es el padre inmediato, $parents[1] es el padre del padre inmediato y así sucesivamente.
$data
Nos permite acceder a los datos del contexto donde estamos posicionados, se utiliza generalmente cuando estamos trabajando con contenidos que son variables y necesitamos acceder a nuestras propiedades de vista modelo.
$index
Es accesible únicamente cuando trabajamos con bucles foreach y nos permite acceder a las diferentes posiciones de nuestro elemento.
Un bucle foreach
Cuando necesitamos iterar sobre una cantidad de elementos, es el momento en el que debemos utilizar el bucle foreach, este va a recorrer un array o un listado de elementos y de esta forma podremos construir nuestra lista en el documento HTML.
En el siguiente ejemplo vamos a tener una propiedad llamada libros en nuestra vista modelo y luego vamos a recorrerla con un foreach haciendo uso de una de las variables de contexto, en este caso de $data, veamos:
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <title>Data Binding foreach</title> </head><body> <ul> <!-- ko foreach: libros --> <li data-bind="text: $data"></li> <!-- /ko --> </ul> <script src="js/knockout-3.3.0.js" type="text/javascript"></script> <script> function VistaModelo() { var self = this; self.libros = [ 'libro 1', 'libro 2', 'libro 3', 'libro 4' ]; }; var vistamodelo = new VistaModelo(); ko.applyBindings(VistaModelo); </script> </body></html>Si vemos el resultado del navegador notaremos el funcionamiento que ocurre al tomar en cuenta todos los conceptos que hemos ido aprendiendo durante el tutorial.
Con esto finalizamos este tutorial, hemos aprendido y tenido un contacto más a fondo con Knockout.js, es importante entender de forma muy profunda y sólida los conceptos de lo que es el data binding, ya es la manera en la que utilizaremos los datos, atributos y propiedades de nuestras vistas modelos. También pudimos entender un concepto muy importante como lo es el contexto, ahora podemos entender cómo se diferencian los diferentes elementos y el por qué Knockout.js sabe cuándo obtener unos datos sobre otros, y es porque siempre sabe el contexto de nuestros elementos.
