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

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 元素有一个快速访问紧急电话的列表

    <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 中检索该数据，它最多仅显示 guiame-inicio 元素中单击的 paper-item 的数据：

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

如何使 guiame-inicio 中的 <a> 或 <paper-item> 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-重复为（我假设您有一个类别属性用于 phone 个数字）：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;
    }
}

我无法测试，但我想这可能会提供一个想法。您可以检查 material 设计的图标集：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');
}

同时在guiame-app中定义buttonSelected属性以能够传入guiame-item元素

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

how to convert a tag id into a polymer property?

javascript

polymer

polymer-2.x

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

how to convert a tag id into a polymer property?

javascript

polymer

polymer-2.x

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