Estoy empezando con esto de polymer y para ir aprendiendo cree una app Polymer2.0 que sirva como una especie de paginas amarillas.
1- Tengo este elemento guiame-app
donde están las iron-pages definidas:
<iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="inicio" role="main">
<guiame-inicio name="inicio"></guiame-inicio>
<guiame-busq name="busqueda"></guiame-busq>
<guiame-favs name="favs"></guiame-favs>
<guiame-item name="item"></guiame-item>
<guiame-g404 name="g404"></guiame-g404>
</iron-pages>
2- Un segundo elemento guiame-inicio
que tiene una lista de “accesos rápidos” o emergencias:
<div class="card">
<paper-icon-item>
<a href="item" id="Bomberos">
<iron-icon id="bomb" icon="guiaIcons:whatshot" item-icon></iron-icon> Bomberos</paper-icon-item></a>
<paper-icon-item>
<a href="item" id="Farmacias">
<iron-icon id="farm" icon="guiaIcons:local-hospital" item-icon> </iron-icon> Farmacias</paper-icon-item></a>
<paper-icon-item>
<a href="item" id="Policia">
<iron-icon id="poli" icon="guiaIcons:local-taxi" item-icon> </iron-icon> Policia</paper-icon-item></a>
<paper-icon-item>
<a href="item" id="Hospital">
<iron-icon id="hosp" icon="guiaIcons:local-pharmacy" item-icon> </iron-icon> Hospital</paper-icon-item></a>
<paper-icon-item>
<a href="item" id="Estado">
<iron-icon id="est" icon="guiaIcons:location-city" item-icon> </iron-icon> Org. Estatales</paper-icon-item></a>
</div>
3- Finalmente un elemento guiame-item
de vista detallada que trae los datos desde un archivo JSON y muestra(debería mostrar) el item seleccionado al clickear en el link del elemento anterior:
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">
<link rel="import" href="../src/guiame-icons.html">
<dom-module id="guiame-item">
<template >
<style>
:host {
display: block;
padding: 16px;
}
</style>
<iron-ajax auto url="../assets/emer.json" handle-as="json" last-response="{{data}}"></iron-ajax>
<template is="dom-repeat" items="[[data]]">
<iron-image src="[[item.imagen]]" sizing="cover" alt="[[item.imgAlt]]"></iron-image>
<h1>[[item.nomb]]</h1>
<paper-item>Dirección: [[item.dire]]</paper-item>
<!--itera por todos las ocurrencias del array tel -->
<template is="dom-repeat" items="[[item.tel]]">
<paper-button raised>
<iron-icon icon="guiaIcons:phone"></iron-icon>[[item]]</paper-button>
<p></p>
</template>
</template>
</template>
<script>
class guiameItem extends Polymer.Element {
static get is() {
return 'guiame-item';
}
static get properties() {
return {
id: {
type: String,
notify: true,
},
};
}
}
customElements.define(guiameItem.is, guiameItem);
</script>
</dom-module>
Todo este flujo de datos funciona(muestra datos del hospital, bomberos, policia, etc.) salvo que no puedo filtrar la lista del archivo JSON y mostrar solo el item en el que se clickeó en el elemento guiame-inicio
.
¿Como puedo hacer para que el id de la etiqueta en guiame-inicio
se convierta en una propiedad del elemento guiame-item
y por lo tanto se traiga solo la información de ese objeto en el archivo JSON?
Desde ya les agradezco lo que puedan aportar como solución a esto.