I’m new with polymer and web developmet. I’ve started an app in Polymer2.0 and I stuck with this:
1- Into guiame-app element I’ve put the iron-pages:
<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- Intoguiame-inicio element there’s a list of quick access emergencie phones
<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- And finally guiame-item with a detailed view of all the needed data. That element retrieves that data from an iron-ajax and it most display only the data of the clicked paper-item in guiame-inicio element:
<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>
How do I make the <a> or <paper-item> id in guiame-inicio become a property of the guiame-item element and filter the response to have only the object information related to the clicked item, from the JSON file?
Thanks in advance, and sorry about my english :)
Your a tags format looks not correct wrapped. I prefer to remove a tags. And add a on-tap="handleButtons" functions into
Your code may look like : guiame-inicio
<div class="card">
<paper-menu-button>
<paper-button id="bomb" on-tap = "handleButtons" item-icon>
<iron-icon icon="guiaIcons:whatshot"></iron-icon> Bomberos
</paper-button>
<paper-button id="farm" on-tap = "handleButtons" item-icon>
<iron-icon icon="guiaIcons:local-hospital"></iron-icon> Farmacias
</paper-button>
<paper-button id="poli" on-tap = "handleButtons" item-icon>
<iron-icon icon="guiaIcons:local-taxi"></iron-icon> Taxi
</paper-button>
<paper-button id="hosp" on-tap = "handleButtons" item-icon>
<iron-icon icon="guiaIcons:local-pharmacy"></iron-icon> Hospital
</paper-button>
<paper-button id="est" on-tap = "handleButtons" item-icon>
<iron-icon icon="guiaIcons:location-city"></iron-icon> Org. Estatales
</paper-button>
</paper-menu-button>
</div>
...
and function to define which button is pressed : guiame-inicio
handleButtons(e) {
console.info(e.path[0].id); // will return "bomb" or"farm" ...
// this.buttonSelected= e.path[0].id; Instead fire event to change page also.
this.dispatchEvent(new CustomEvent('button-selected', {detail: {button: e.path[0].id}}));
}
And finally bind this result to dom-repeat as (I assuming you have a category property for phone numbers): guiame-item
<template is="dom-repeat" items="[[item.tel]]" filter="{{_filterResult(item.category, buttonSelected)}}">
<paper-button raised>
<iron-icon icon="guiaIcons:phone"></iron-icon>[[item]]</paper-button>
<p></p>
</template>
And filtering function may : guiame-item
_filterResult(category, filter) {
if (category != filter) {
return false;
}
}
I did not able to test but I guess this may give a idea. You may check material design s icon sets : https://www.webcomponents.org/element/PolymerElements/iron-icons/demo/demo/index.html Also need to bind buttonSelected properties between your custom elements as:guiame-app
<iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="inicio" role="main">
<guiame-inicio name="inicio" on-button-selected="setPageToNavigate"></guiame-inicio>
<guiame-busq name="busqueda"></guiame-busq>
<guiame-favs name="favs"></guiame-favs>
<guiame-item name="item" buttonSelected="[[buttonSelected]]"></guiame-item>
<guiame-g404 name="g404"></guiame-g404>
</iron-pages>
setPageToNavigate(btn) {
this.set('buttonSelected', btn.detail.button); // this button property dispatched from guiame-inicio !!
this.set('page', 'item');
}
Also define buttonSelected property in guiame-app to able to pass into guiame-item element
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments