Question

我是聚合物和网络开发的新手。我在Polymer2.0中启动了一个应用程序，我坚持这个：

1-进入guiame-app元素我放了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-进入guiame-inicio元素有一个快速访问emergencie手机列表

    <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-最后guiame-item详细查看了所有需要的数据。该元素从iron-ajax检索该数据，并且它最多只显示paper-item元素中点击的guiame-inicio的数据：

<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>

如何使<a>中的<paper-item>或guiame-inicio ID成为guiame-item元素的属性，并过滤响应以仅包含与之相关的对象信息点击了JSON文件中的项目？

提前致谢，对我的英语感到抱歉：）

Answer 1

您的a代码格式看起来不正确。我更愿意删除a代码。并将on-tap =“handleButtons”函数添加到

中

您的代码可能如下所示：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>

...

和定义按下哪个按钮的功能：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}}));
         }

最后将此结果绑定到dom-repeat as（假设您有电话号码的类别属性）：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>

过滤功能可以：guiame-item

_filterResult(category, filter) {
    if (category != filter) {
       return false;
    }
}

我无法测试，但我想这可能会给出一个想法。您可以查看材料设计的图标集：https://www.webcomponents.org/element/PolymerElements/iron-icons/demo/demo/index.html 还需要在自定义元素之间绑定buttonSelected属性：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');
}

在buttonSelected中定义guiame-app属性，以便能够传递到guiame-item元素

如何将标签ID转换为聚合物属性？

1 个答案: