1

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.

1 respuesta 1

1

Utilizando un elemento <iron-selector> en tu elemento <guiame-inicio> puede resultar más sencillo:

<div class="card">
  <iron-selector selected="{{selected}}" attr-for-selected="id">
    <div id="bomb"><iron-icon id="bomb" icon="guiaIcons:whatshot" item-icon></iron-icon>Bomberos</div>
    <div id="farm"><iron-icon id="farm" icon="guiaIcons:local-hospital" item-icon> </iron-icon>Farmacias</div>
    <div id="poli"><iron-icon id="poli" icon="guiaIcons:local-taxi" item-icon> </iron-icon>Policia</div>
    <div id="hosp"><iron-icon id="hosp" icon="guiaIcons:local-pharmacy" item-icon> </iron-icon>Hospital</div>
    <div id="est"><iron-icon id="est" icon="guiaIcons:location-city" item-icon> </iron-icon>Org. Estatales</div>
  </iron-selector>
</div>

selected sería una propiedad que tendrías que declarar en <guiame-inicio> y que podrías usar para enlazarla con <guiame-item>.

<guiame-app> quedaría entonces:

<iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="inicio" role="main">
   <guiame-inicio name="inicio" selected="{{idSelected}}"></guiame-inicio>
    <guiame-busq name="busqueda"></guiame-busq>
    <guiame-favs name="favs"></guiame-favs>
    <guiame-item name="item" filtro="[[idSelected]]"></guiame-item>
    <guiame-g404 name="g404"></guiame-g404>
</iron-pages>
3
  • Estuve trabajando esta idea @jaslynx pero sigo con inconvenientes. Al iron-selector tal como lo pusiste le agregué los tag <a> con los href para poder pasar de página, pero ahí enlazas con selected="{{selected}}" en vez de idSelected es un error de tipeo? porque aunque lo corrijo no me funciona; imprimo filtro en guiame-item y siempre está vacía. Gracias
    – Adr
    Commented el 21 jun. 2017 a las 19:06
  • ¿Has declarado la propiedad selected en el elemento <guiame-inicio>? En el apartado static get properties() tienes que declarar la propiedad selected de tipo String y con notify igual a true. De forma parecida tienes que declarar la propiedad filtro en el elemento <guiame-item>. En <guiame-app> puedes utilizar el nombre de identificador que desees para hacer el data binding entre guiame-inicio y guiame-item con tal que se denominen igual, no necesariamente se tiene que denominar idSelected.
    – jaslynx
    Commented el 22 jun. 2017 a las 8:56
  • Estaba declarada la propiedad, pero no estaba notify=true. Eso hizo la magia!!! Ahora no puedo hacer que se filtren los resultados, pero eso sería motivo de otra pregunta. Mil Gracias @jaslynx !
    – Adr
    Commented el 26 jun. 2017 a las 20:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.