El binding no es más que enlazar la información que tenemos en el "scope" con lo que mostramos en el HTML. Esto se produce en dos sentidos:
One-way binding:
En este caso la información solamente fluye desde el scope hacia la parte visual, es decir, desde el modelo hacia la representación de la información en el HTML. Lo conseguimos con la sintaxis "Mustache" de las dos llaves.
En este caso la información solamente fluye desde el scope hacia la parte visual, es decir, desde el modelo hacia la representación de la información en el HTML. Lo conseguimos con la sintaxis "Mustache" de las dos llaves.
{{ dato }}
Ese dato estarías trayéndolo desde el scope y mostrándolo en la página. La información fluye desde el scope hacia la representación quiere decir que, si por lo que sea se actualiza el dato que hay almacenado en el modelo (scope) se actualizará automáticamente en la presentación (página).
Two-way binding:
En este segundo caso la información fluye desde el scope hacia la parte visual (igual que en "one-way binding") y también desde la parte visual hacia el scope. La implementas por medio de la directiva ngModel.
En este segundo caso la información fluye desde el scope hacia la parte visual (igual que en "one-way binding") y también desde la parte visual hacia el scope. La implementas por medio de la directiva ngModel.
<input type="text" ng-model="miDato" />
En este caso cuando el modelo cambie, el dato que está escrito en el campo de texto (o en el elemento de formulario donde lo uses) se actualizaría automáticamente con el nuevo valor. Además, gracias al doble binding (two-way) en este caso, cuando el usuario cambie el valor del campo de texto el scope se actualizará automáticamente.
Cómo puedo experimentar el binding
Realmente en los ejemplos más sencillos de AngularJS ya hemos experimentado el binding. No me hace falta ni Javascript para poder hacer un ejemplo donde se pueda ver en marcha perfectamente.
<div ng-app>
<input type="text" ng-model="dato" />
{{dato}}
<input type="button" value="hola" ng-click="dato='hola'" />
</div>
Mira, tienes tres elementos destacables.
- Un campo de texto con ng-model="dato". En ese campo tenemos un "doble binding".
- Una expresión {{dato}} donde se mostrará aquello que haya escrito en el campo de texto. En este caso tenemos un binding simple, de un único sentido.
- finalmente tienes un botón que no tiene bindig alguno. Simplemente, cuando lo pulses, estás ejecutando una expresión (con ng-click) para cambiar el scope en su variable "dato".
El binding one-way lo ves muy fácilmente. Simplemente escribe algo en el campo de texto y observa como se actualiza el lugar de la página donde estás volcándo el valor con {{dato}}.
Para poder ver bien el doble binding he tenido que crear el botón, que hace cambios en el scope. Aclaro de nuevo que el doble binding de todos modos lo tienes en el INPUT text. Dirección 1) lo ves cuando escribes datos en el campo de texto, que viajan al modelo automáticamente (y sabemos que es cierto porque vemos cómo {{dato}} actualiza su valor. Dirección 2) lo ves cuando haces click en el botón. Entonces se actualiza ese dato del modelo y automáticamente viaja ese nuevo valor del scope hacia el campo de texto.
Por qué el binding es tan útil
Piensa en una aplicación que realizases con Javascript común (sin usar librería alguna), o incluso con jQuery que no tiene un binding automático. Piensa todo el código que tendrías que hacer para implementar ese pequeño ejemplo. Suscribirte eventos, definir las funciones manejadoras para que cuando cambie el estado del campo de texto, volcarlo sobre la página. Crear el manejador del botón para que cuando lo pulses se envíe el nuevo texto "hola" tanto al campo de texto como a la página, etc.
No estamos diciendo que sea difícil hacer eso "a mano", seguro que la mayoría es capaz de hacerlo en jQuery, pero fíjate que para cada una de esas pequeñas tareas tienes que agregar varias líneas de código, definir eventos, manejadores, especificar el código para que los datos viajen de un lugar a otro. Quizás no es tan complicado, pero sí es bastante laborioso y en aplicaciones complejas comienza a resultar un infierno tener que estar pendiente de tantas cosas.
Otra ventaja, aparte del propio tiempo que ahorras, es una limpieza de código muy destacable, ya que no tienes que estar implementando muchos eventos ni tienes necesidad de enviar datos de un sitio a otro. Tal como te viene un JSON de una llamada a un servicio web lo enganchas al scope y automáticamente lo tienes disponible en la vista, lo que es una maravilla. Esto se ve de manera notable en comparación con otros frameworks como BackboneJS.
Nota: Osea que el doble binding de Angular nos ahorra mucho trabajo, pero ojo, quizás no sea necesario para cualquier tipo de aplicación. Si tus necesidades no son muy grandes igual no consigues adelantar tanto. Incluso en aplicaciones con inmensa cantidad de datos puede que el doble binding te pueda ralentizar un poco la aplicación porque toda esa gestión del binding se haga pesada, igual de manera innecesaria. En esos casos quizás otra librería funcione mejor que AngularJS. Sin embargo, la inmensa mayoría de las aplicaciones se beneficiarán de ese doble binding.
Dónde encontrarás el binding
El binding que dispones en AngularJS se implementa automáticamente en muchas otras directivas que existen en el framework.
Es muy útil cuando trabajamos con colecciones y directivas como ngOptions o ngRepeat, que nos sirven para realizar recorridos a esas colecciones para crear los campos OPTION de un SELECT o simplemente para repetir cualquier pedazo del DOM. En estos casos, cuando la colección cambia, nuestra página se actualiza automáticamente.
También puedes hacer binding a atributos de diversas etiquetas de la página, con las directivas ngHref o ngSrc, ngStyle, ngClass. También funciona en formularios con una especie de framework de validación "Validations" o con el propio ngSubmit.
See the Pen DataBinding Example by Gerardo (@gelopfalcon) on CodePen.
