Binding en Polymer

El data binding (enlace de datos) conecta los datos de un elemento personalizado a una propiedad o atributo de un elemento en su DOM local. Los datos del elemento host pueden ser una propiedad o sub-propiedad.

En polymer existen diferentes tipos de bindeado:

• Binding de 1 y 2 direciones
• Binding a atributo
• Binding 2 direcciones en elementos nativos
• Binding a sub-propiedades
• Binding a arrays
• Computed binding

Binding de 1 y 2 direciones

El binding  de 1 direccion no tiene mas misterio, la comunicación va del padre al hijo y la forma de la declaración es la siguiente: [[propiedad]]

El binding de 2 direciones es un poquito más complejo que el data binding de 1 dirección.

La comunicación se realiza desde el padre al hijo, y si el hijo modifica alguna propiedad este se la notifica al padre.

En nuestro caso el paper-input al tener binding en ambos sentidos, notifica al padre y este recibe  todos los cambios, realizando la modificación de la propiedad.

Se usa muy bien de hijo a padre pero si necesitamos subir mas arriba ya no es buena practica, y la forma de la declaración es: {{propiedad}}

index.html

binding-app.html

Ahora que entendemos como funciona el binding de 1 y 2 direcciones, es el momento de crear nuestros componentes para que puedan informar al padre.

Para realizar esta acción vamos a usar una opción dentro de la configuración de las propiedades y que su nombre es notify.

Con esta configuración a true, se comunica con el padre y le informa de los cambios.

A continuación un vídeo y el código fuente:

binding-app.html

comp-notify.html

Binding a atributo

El binding a atributos de HTML (href, class, etc…) se realiza con el ‘$‘, porque el binding a una propiedad se realiza con la sintaxis conocida [[]] y {{}}.

¿Y porque es necesario usar $?, pues porque algunos atributos de HTML no entienden el binding de polymer, y la solución para que eso no pase es usando el $.

Tenemos que tener en cuenta que el binding para los atributos es de 1 dirección.

Aquí tienes un listado de las propiedades afectadas por el binding a atributo:

Atributo	Propiedad	Anotaciones
class	classList, className
style	style
href	href
for	htmlFor
data-*	dataset
value	value	Solo para type=’number’

Binding 2 direcciones en elementos nativos

Para realizar el binding de 2 direcciones en elementos nativos necesitamos usar una sintaxis especial indicando el tipo de evento.

Esto ocurre porque el elemento nativo no esta pensado para enviar los datos al componente padre, por eso motivo tenemos que avisar a polymer usando una sintaxis especial.

Por ejemplo, en HTML existen propiedades cuyo valor sí cambia en respuesta a un evento de usuario, como pueden ser value de un <input> o el checked checkbox por ejemplo.

Dado que estos elementos nativos no emiten un evento del tipo property-changed de Polymer, podemos establecer un binding a otro nombre de evento usando la siguiente sintaxis:

<input type=’checkbox’ checked='{{myBoolProperty::change}}’>

Con esto estamos consiguiendo que el valor de myBoolProperty se iguale con el valor del checked del input cuando se produzca el evento nativo change.

A continuación el código de ejemplo:

index.html

input-two-app.html

input-three-app.html

Binding a subpropiedades de objetos

Cuando tenemos que trabajar con las subpropiedades de los objetos nos encontramos con un problema, ya que si modificamos las subpropiedades no se ejecuta el binding y no informa de los cambios.

Como hemos dicho, el binding no funciona si modificamos una subpropiedad, pero si modificamos el objeto entero entonces si se ejecutara el binding.

¿Como hacemos para que el binding funcione con una subpropiedad?, pues polymer lo ha simplificado usando set, de esta forma conseguimos modificar esa subpropiedad y que se ejecute el binding.

Con esa simple linea ya funcionaría el binding.

A continuación un vídeo y el código:

index.html

sub-prop.html

Binding en arrays

Como ocurre en las subpropiedades el binding en arrays no se lanza automáticamente salvo que se modifique el array entero.

Si modificas un elemento del array este quedara modificado, pero no lanzara el binding y no se mostraran los cambios.

Bien, ¿y como hacemos para que funcione el binding?. Muy simple, deberemos usar los métodos de manipulación de arrays que ofrece polymer y que son los mismos de javascript nativo.

Imaginemos un array que se llama libros, en javascript nativo si queremos añadir un elemento usaríamos la siguiente instrucción: libros.push(valor).

En polymer es igual, pero como necesitamos manipular el array que esta dentro del componente usaríamos la siguiente instrucción: this.push(‘array’, valor).

A continuación un vídeo y su código:

index.html

bind-array.html

Computed binding

Son parecidas a las propiedades computadas, ya que nos permite definir una función que se ejecute y calcule el valor a bindear.

A continuación un ejemplo de computed binding y propiedades computadas:

index.html

computed-bind.html