轻按监听器以查看聚合物铁清单项目吗?

问题描述

我有一个使用iron-list来显示对象数组的自定义元素.每个项目都是通过模板生成的，如下所示:

I have a custom element that utilizes iron-list to display an array of objects. Each item is generated via a template as follows:

<iron-list id="projectList" items="[[projects]]" indexAs="_id" as="projLI" class="layout flex">
    <template>
        <div>
           <paper-material id="itemShadow" animated elevation="1">
               <div class="item layout horizontal" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)">

                   <!-- I use a paper-menu-button to display a list of available actions here -->

                   <!-- list item object content here such as: [[projLI.desc]] etc. -->

               </div>
           </paper-material>
        </div>
    </template>
</iron-list>

什么是最好的聚合物友好方法，既可以检测铁清单项目本身的敲击事件(理想地知道实际上是通过projLI._id敲击了哪个项目)，又能够处理内部的paper-menu-button敲击活动有不同的方式?

What is the best polymer-friendly approach to detect both a tap event on the iron-list item itself (ideally knowing which item was actually tapped via projLI._id), yet also be able to handle the internal paper-menu-button tap events in a different way?

我已经注视了Polymer 1.0的新事件侦听器( https://www.polymer-project.org/1.0/docs/devguide/events.html )，作为一种可能的方法，尝试侦听不同的元素点击事件(如该页面上的示例1所示) ，但不确定在这里是否可以使用.我还考虑过可能在铁表周围以某种方式使用iron-selector吗?那可行吗?考虑到铁选择器只会有一个孩子(即铁列表元素，而不是它的模板化子对象)，我不确定这两种方法是否都可以.

I've eye-balled polymer 1.0's new event listeners (https://www.polymer-project.org/1.0/docs/devguide/events.html), as a possible approach, attempting to listen for different element tap events (as shown in example 1 on that page), but I'm not sure if that will work here. I've also considered possibly using iron-selector somehow around iron-list? Is that doable? I'm not sure that will work either, given that iron-selector would only have one child (i.e. the iron-list element and not it's templated children).

我觉得我错过了一种非常简单的方法来完成此操作.有人可以给我看看灯吗?

I feel like I'm missing a really easy way to accomplish this. Can someone please show me the light?

推荐答案

我是通过在列表元素ID中编码数组索引，然后从列表项事件目标中提取ID来做到这一点的.这是一个执行此操作的示例Polymer元素.

I do this by encoding an array index in a list element id, then pulling the id out of a list item event target. Here is an example Polymer element that does this.

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-list/iron-list.html">

<dom-module id="list-example">
  <style>
    :host {
      display: block;
    }

    #list-example {
      height: 100px;
    }
  </style>
  <template>

    <paper-material animated elevation="1">
      <iron-list id="list-example" items="[[data]]">
        <template>
          <div id="{{index2id(item.index)}}" on-mouseover="onMouseOverItem">{{item.name}}</div>
        </template>
      </iron-list>
    </paper-material>

  </template>
</dom-module>

<script>
  (function () {
    Polymer({
      is: 'list-example',

      ready: function() {
        for(var i = 0; i < this.data.length; i++) {
          this.data[i].index = i;
        }
      },

      index2id: function(index) {
        return "_" + index;
      },

      id2index: function(id) {
        return Number(id.substr(1));
      },

      onMouseOverItem: function(e) {
        console.log('on-mouseover list item:', this.data[this.id2index(e.target.getAttribute('id'))]);
      },

      properties: {
        data: {
          type: Array,
          value: [{name: 'A'}, {name: 'B'}, {name: 'C'},
                  {name: 'D'}, {name: 'E'}, {name: 'F'},
                  {name: 'G'}, {name: 'H'}, {name: 'I'}]
        }
      }
    });
  })();
</script>

这篇关于轻按监听器以查看聚合物铁清单项目吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！