Hasta este punto en el Manual de Polymer no hemos entrado todavía en detalle con los templates de repetición, una de las herramientas más usadas a la hora de construir la parte visual de un componente

Los templates de repetición, o templates de tipo "dom-repeat", nos permiten iterar entre los elementos de un array y producir una repetición de elementos en la vista de un componente Polymer. Son tan importantes para hacer ejemplos medianamente básicos, que posiblemente los habremos visto de pasada en anteriores artículos, aunque hasta ahora no los habíamos tratado de manera particular.

El dom-repeat, junto con otros tipos de templates específicos de Polymer los tienes documentados en la clasificación Data binding helper elements y es que son elementos preparados para aprovechar el sistema de binding de Polymer. En ellos bindearemos un array y el propio componente permitirá que un grupo de elementos de un template se repita tantas veces como elementos en el array, bindeando a su vez el elemento actual a cada item repetido. Enseguida lo veremos mejor con un ejemplo.

Implementar un dom-repeat

Para implementar un dom-repeat tenemos que partir de un array. Ese array será el que usaremos para hacer la repetición. Ese array de datos lo podrías tener escrito tal cual en el código, aunque lo corriente es que lo recibas de una consulta Ajax a un servicio web o API REST. Más adelante tenemos la parte de Ajax, así que vamos a crear un sencillo array como valor de una propiedad declarada.

properties: {
        cervezas: {
          type: Array,
          value: function() {
            return [
              {
                name: 'Brahma',
                type: 'Pilsen'
              },
              {
                name: 'Saint Beer',
                type: 'Weiss'
              },
              {
                name: 'Coruja',
                type: 'Pale ale'
              }
            ]
          }
        }
      }

Como puedes ver, es un array donde cada uno de los elementos es un objeto. Podríamos haber usado arrays donde elementos son valores primitivos, como cadenas o números, pero lo cierto es que casi siempre iteras por items que son objetos.

Una vez que tenemos nuestro array, de cervezas en este caso, lo podemos recorrer de manera declarativa con nuestro template de repetición, de esta manera:

<template is="dom-repeat" items="[[cervezas]]">
      <h2>[[item.name]]</h2>
      <p>Tipo de cerveza: [[item.type]]</p>
</template>

Este código lo colocarás tal cual en el template de tu componente. Como puedes observar, el dom-repeat es un tipo específico de template, por lo que estamos en la práctica anidando templates. Para indicar que este template es de repetición usamos is="dom-repeat", lo que signitica que éste elemento de repetición es una especialización del elemento template de los web components.

A dom-repeat le tienes que indicar el array con el que vas a realizar la repetición en el atributo "items". En este caso le hemos pasado el array de cervezas usando el sistema de binding de Polymer.

Una vez dentro del template podemos indicar el elemento o elementos que deben repetirse para cada item del array. Lo interesante es que dentro del template tendremos acceso al item actual en el array por medio del objeto "item". Por tanto, para acceder al nombre de una cerveza podríamos hacer item.name o su tipo item.type.

Alias del item

Algo sencillo que puede mejorar nuestro código y hacerlo más fácil de leer es asignar un alias al item dentro del template. Si cada uno de los item del array es una cerveza, podemos asignar el alias "cerveza" para ese item actual mediante el atributo as="cerveza".

En el código nos quedaría así:

<template is="dom-repeat" items="[[cervezas]]" as="cerveza">
      <h2>[[cerveza.name]]</h2>
      <p>Tipo de cerveza: [[cerveza.type]]</p>
</template>

Ahora que tenemos un alias, el nombre de la cerveza lo tendremos en cerveza.name y su tipo en cerveza.type.

Ejemplo completo de componente con template dom-repeat

Por si alguien está perdido, aquí se puede ver el código de un componente que realiza el template de repetición del ejemplo.

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="ejemplo-repeat">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <template is="dom-repeat" items="[[cervezas]]" as="cerveza">
      <h2>[[cerveza.name]]</h2>
      <p>Tipo de cerveza: [[cerveza.type]]</p>
    </template>
  </template>
  <script>
    Polymer({
      is: 'ejemplo-repeat',

      properties: {
        cervezas: {
          type: Array,
          value: function() {
            return [
              {
                name: 'Brahma',
                type: 'Pilsen'
              },
              {
                name: 'Saint Beer',
                type: 'Weiss'
              },
              {
                name: 'Coruja',
                type: 'Pale ale'
              }
            ]
          }
        }
      }
    });
  </script>
</dom-module>

Los templates de repetición tienen cosas interesantes que veremos más adelante, como la posibilidad de ordenación de sus items o filtrado, de modo que aparezcan unos sí y otros no.