polymer: 10. helpers

introducción a los helpers de polymer

Vincent Van Gogh

archivado en: JavaScript / 13 marzo, 2016 / taller:

Polymer cuenta con varias utilidades para renderizar las plantillas. Aún son pocas comparadas con angular, pero es previsible que vayan aumentando y, en cualquier caso, tenemos las dos herramientas fundamentales para la maquetación dinámica de páginas: los bucles y las expresiones condicionales. Empezamos por las primeras.

dom-repeat

Para repetir subplantillas a partir de los datos de un array, el mecanismo es muy sencillo. Se crea una subtemplate anidada en la que se añaden dos atributos:

  • is="dom-repeat", para indiciar que se debe repetir.
  • items={{el array que contiene los datos}}

De esta manera, polymer sabe que debe recorrer un array y en cada vuelta podemos acceder al elemento correspondiente y al índice (index). En código queda más claro:

<dom-module id="foo-component">

<template>

<h3>Frutas</h3>

<template is="dom-repeat" items="{{fruits}}">

<p> La fruta {{index}} es {{item.name}}

y es de color {{item.color}}</p>

</template>

</template>

<script>

Polymer({

is: 'foo-component',

properties: {

fruits: {

type: Array,

value: [

{'name': 'cerezas', 'color': 'rojo'},

{'name': 'mandarinas', 'color': 'naranja'}

]

}

}

}):
</script>

</dom-module>

Además, polymer mapea de forma automática los elementos iterados en el array a lo que llaman modelo (model), que no debemos confundir con el ng-model de angular. Dicho de otra forma, cada elemento del array recibe en el momento de ser recorrido una propiedad denominada model en la que se crea una instancia de ese subtemplate, lo cual es muy útil para las acciones.

Por ejemplo, vamos a añadir un botón a nuestro componente frutas que nos permita escoger la favorita y esa se mostrará en la parte inferior de forma destacada, ya fuera del bucle.

<dom-module id="foo-component">

<template>

<h3>Frutas</h3>

<template is="dom-repeat" items="{{fruits}}">

<p>

La fruta {{index}} es {{item.name}}

y es de color {{item.color}} <br>

<button on-tap="setFavorite">favorita</button>

</p>

</template>

Mi favorita es: {{fruitFavorite}

</template>

<script>

Polymer({

is: 'foo-component',

properties: {

fruits: {

type: Array,

value: [

{'name': 'cerezas', 'color': 'rojo'},

{'name': 'mandarinas', 'color': 'naranja'}

]

},

fruitFavorite: {

type: String,

value: "ninguna"

}

},

setFavorite: function(e) {

var fruit = e.model.item;

this.fruitFavorite = fruit.name;

/* La mejor manera de entender qué es la instancia model es consologueándola */

console.log('e', e.model);

}

});

</script>

</dom-module>

Filtros y ordenación

Al igual que sucede en angular con los ng-repeat, en polymer podemos filtrar y ordenar los bucles durante la renderización.

Para filtrar se usa el atributo filter, en el cual definimos una función callback que compruebe si un item se ajusta (true) o no (false) al criterio indicado, tal y como sucede con el filter nativo de javaScript. Por ejemplo, así solo se mostrarían las frutas de color rojo.

...

<template is="dom-repeat" items="{{fruits}}" filter="filterFruits">

...

filterFruits: function(item) {

if ( item.color == 'rojo' ) {

return true;

}

return false;

},

...

El mecanismo de sort es el mismo, se incluye como atributo y se define una función callback, en la cual se hace el mismo cálculo que el sort normal de javaScript, que es algo enrevesado a decir verdad. Por ejemplo, así ordenaríamos nuestras frutas por su nombre.

...

<template is="dom-repeat" items="{{fruits}}" sort="orderFruits">

...

orderFruits: function(a, b) {

return a.name < b.name ? -1 : 1;

},

Si hacemos las cosas en polymeresco, cambiando las cosas con set(), observers y los métodos de polymer para manipular arrays, no deberíamos tener problemas para que las subtemplates se refresquen con los datos que hayamos cambiado. Sin embargo, en el peor de los escenarios, podemos forzar el re-renderizado con el método render().

templates condicionales

Las templates condicionales, esto es, las que se renderizan solo si se cumple una condición determinada son fáciles de entender si sabemos qué son los valores falsy y truthy de javaScript. Y estos son los que en una condición, como la que define un if, dan false y true respectivamente. Por ejemplo, todos estos valores son falsy (y viceversa)

  • if (false)
  • if (null)
  • if (undefined)
  • if (0) // (incluido un array.length vacío)
  • if (NaN)
  • if ('')

Así, lo único que debemos hacer es incluir en un template el atributo is="dom-if" y el atributo if un valor a evaluar y, ojo, que digo un valor, no una expresión (if === tal...). Por ejemplo, así no se renderizarían las frutas que no tuvieran definido un color.

<template is="dom-if" if="{{item.color}}">

La fruta {{index}} es {{item.name}}

y es de color {{item.color}} <br>

<button on-tap="setFavorite">favorita</button>

</template>

Ojo, los dom-if con eventos dentro de los dom-repeat pueden dar algo la murga, al menos de momento, por lo que conviene buscar construcciones menos rebuscadas para estos casos.

Auto-binding templates

El tercer helper importante son las plantillas autobindeadas, que sirven para trabajar con <templates> desde fuera de polymer y son una extensión del elemento template.

Para eso, añadimos en el tag template el atributo  is="dom-bind".

index.html

<template id="miTemplate" is="dom-bind">

{{miDatoBindeado}}

</template>

Y ya desde cualquier sitio de la página donde hayamos situado el template, podríamos manejar el binding como si fuera un custom element.

<script>

var miTemplate = document.querySelector('#miTemplate');

/* Esto equivale al document.ready de jQuery */

miTemplate.addEventListener('dom-change', function() {

miTemplate.miDatoBindeado = "Bazinga!";

});

</script>

Personalmente no le veo mucha utilidad a este helper, puesto que para este tipo de jugadas es mejor encapsular un componente dentro de otro, pero nunca se sabe...

Bueno, pues con esto termino. Me dejo algunos detalles por explicar de los dom-repeat y los dom-if, pero se pueden consultar en la documentación oficial y tengo que ir cerrando.

el código de esta entrada está en gist

 

|| Tags: , ,

valoración de los lectores sobre polymer: 10. helpers

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (3 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario


*