Al principio del Manual de Polymer 2 hemos hablado de binding, pero nos hemos quedado en un conocimiento muy general, que será necesario complementar con nuevos artículos. Así pues, nos vamos a dedicar a analizar dos usos del binding muy habituales, como es el binding a propiedades y el binding a atributos.

En realidad el binding a propiedades ya lo hemos usado en diversas ocasiones, por lo que no necesitará muchas más explicaciones. Sin embargo el bindeo a atributos tiene algunos detalles importantes sobre los que tenemos que hablar. Pero primero habría que aclarar estos dos conceptos, pues a priori pueden parecer lo mismo.

Qué son propiedades y qué atributos

Distinguir entre propiedades y atributos es fácil. Básicamente propiedades se refiere a elementos de Polymer y sus propiedades declaradas, mientras que atributos se refiere a lo que son atributos estándar, de las etiquetas HTML en general.

Lo que sabes de binding lo puedes aplicar a ambos casos, sin embargo hay algunas connotaciones que debes saber.

Qué son propiedades

En los componentes de Polymer tenemos propiedades, declaradas mediante la declaración "properties". Eso son lo que llamamos propiedades del componente y son las que hemos usado repetidas veces a lo largo del manual. Polymer facilita la asignación de valores a esas propiedades del componente, por medio del template.

<paper-input label="Escribe algo" value="{{valorEscrito}}"></paper-input>

Ves dos casos interesantes en el anterior código:

• A una propiedad como "label" le podemos asignar directamente un literal de cadena.
• A la propiedad "value" le estamos asignando el valor de otra propiedad del componente padre ("valorEscrito").

Polymer se encarga de asignar esos valores a las propiedades. En el caso de "label" simplemente le asigna ese valor literal, pero en el caso del "value" tenemos un binding de propiedad. En este caso "value" es una propiedad del elemento "paper-input", propia de Polymer.

Qué son atributos

Sin embargo, hay veces que quieres asignar valores a atributos de un elemento y no a propiedades declaradas de Polymer. Es el caso de atributos como "class", "style", "hidden"... cualquier elemento del HTML tiene esos atributos, por ejemplo una etiqueta DIV, P, etc. También hay etiquetas que tienen atributos específicos de ellas mismas, por ejemplo la etiqueta A (un enlace) tiene el atributo "href". Incluso elementos de Polymer pueden tener atributos estándar del HTML como class.

En general, como ves, todo lo que son atributos de las etiquetas, que vienen del lenguaje HTML, son lo que llamamos atributos.

Cómo funciona el binding a atributos

Como decía, el binding a propiedades de elementos de Polymer no tiene ningún secreto, y de hecho ya lo hemos practicado mucho en el manual. Lo que tenemos que aprender es el binding de atributos, que es prácticamente lo mismo, solo que tenemos que indicar un caracter "$" en el template.

Se debe colocar un $ justo después del nombre del atributo, por ejemplo:

<div class$="[[claseActiva]]">Tendrá un class cuyo valor se bindea</div>

Sobre el binding a atributos debes saber algunas cosas:

• Sólo se pueden hacer de una dirección (one way binding). Para hacer de dos direcciones hay alternativas en algunos casos.
• Internamente Polymer los implementa con el método nativo setAttribute()
• En algunos navegadores puede que funcione el binding a atributos sin colocar el "$", pero no te confunda, pues en otros browsers puede no funcionar.

Ejemplo de componente con binding a atributo

En el siguiente código puedes ver un ejemplo de componente en el que hemos colocado un binding a un atributo. Se trata del atributo "href" de una etiqueta A, de enlace.

El componente del ejemplo es muy sencillo. El valor del href se recoge por medio de un campo de texto implementado con el componente paper-input. Se asigna al atributo nativo del HTML mediante href$="[[url]]".

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">

<dom-module id="enlace-variable">
  <template>
    <style>
      :host {
        display: block
      }
    </style>

    <a href$="[[url]]">[[url]]</a>
    <paper-input label="Escribe una URL" value="{{url}}"></paper-input>
  </template>

  <script>
    class EnlaceVariable extends Polymer.Element {
      static get is() {
        return 'enlace-variable';
      }

      static get properties() {
        return {
          url: String
        };
      }

      constructor() {
        super();
      }

    }

    window.customElements.define(EnlaceVariable.is, EnlaceVariable);
  </script>
</dom-module>

En realidad el bindeo sobre atributos es algo sencillo. Simplemente tienes que fijarte para no olvidar el carácter "$" cuando estás bindeando al atributo, para asegurarte que funcione bien en todos los navegadores.

Recuerda que el binding sobre atributos solo funciona en una dirección, por lo que no te va a servir si quieres recibir un dato mediante doble binding, sobre un campo INPUT, por ejemplo. Para ese caso en concreto, veremos nuevos mecanismos en un artículo más adelante.