polymer - 点击 polymer 铁列表项目的监听器？

Question

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

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

什么是最好的 polymer 友好方法来检测 iron-list 项目本身的点击事件(理想情况下知道通过 projLI._id 实际点击了哪个项目)，同时还能够以不同的方式处理内部 paper-menu-button 点击事件？

我已经注意到 polymer 1.0 的新事件监听器 ( https://www.polymer-project.org/1.0/docs/devguide/events.html )，作为一种可能的方法，尝试监听不同的元素点击事件(如该页面上的示例 1 所示)，但我不确定这是否会在这里工作。我还考虑过可能在 iron-list 周围使用 iron-selector 吗？那可行吗？我不确定这是否可行，因为 iron-selector 只会有一个子元素(即 iron-list 元素而不是它的模板子元素)。

我觉得我错过了一个非常简单的方法来完成这个。有人可以给我看灯吗？

Answer 1

Follow the model outlined on lines 154 and 184 of this demo . https://github.com/PolymerElements/iron-list/blob/master/demo/collapse.html

我的元素.html

<iron-list items="[[items]]">
  <template>
    <my-list-item on-tap="_toggleMe"></my-list-item>
  </template>
</iron-list>
...
_toggleMe: function(e) {
  console.log(e.model.index);
}

关键是将事件和监听器方法(在本例中为 toggleMe())放在 <template> 中的 iron-list .这允许 iron-list注册数组索引。