blocks|key|875735|text|为此，我在list元素id中编码数组索引，然后从list+item事件目标中提取id。这是一个聚合物元素的例子，可以做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|875736|<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%2B%2B)+{
++++++++++this.data[i].index+=+i;
++++++++}
++++++},

++++++index2id:+function(index)+{
++++++++return+"_"+%2B+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>|code-block|syntax|javascript|875737|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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.</p>

<pre><code>&lt;link rel="import" href="../../bower_components/polymer/polymer.html"&gt;
&lt;link rel="import" href="../../bower_components/iron-list/iron-list.html"&gt;

&lt;dom-module id="list-example"&gt;
  &lt;style&gt;
    :host {
      display: block;
    }

    #list-example {
      height: 100px;
    }
  &lt;/style&gt;
  &lt;template&gt;

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

  &lt;/template&gt;
&lt;/dom-module&gt;

&lt;script&gt;
  (function () {
    Polymer({
      is: 'list-example',

      ready: function() {
        for(var i = 0; i &lt; 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'}]
        }
      }
    });
  })();
&lt;/script&gt;
</code></pre>


blocks|key|2027622|text|我刚刚解决了我在这里的问题https://groups.google.com/forum/#!topic/polymer-dev/r9IsUKVnLVM。阅读本文档https://www.polymer-project.org/1.0/docs/devguide/events.html。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2027623|我希望它能帮到你！|2027624|entityMap|0|LINK|mutability|MUTABLE|url|https://groups.google.com/forum/#!topic/polymer-dev/r9IsUKVnLVM|1|https://www.polymer-project.org/1.0/docs/devguide/events.html^0|D|1R|0|2A|1P|1|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<p>I just solved my issue of here <a href="https://groups.google.com/forum/#!topic/polymer-dev/r9IsUKVnLVM" rel="nofollow">https://groups.google.com/forum/#!topic/polymer-dev/r9IsUKVnLVM</a>. Reading this documentation <a href="https://www.polymer-project.org/1.0/docs/devguide/events.html" rel="nofollow">https://www.polymer-project.org/1.0/docs/devguide/events.html</a>. </p>

<p>I hope it helps you!</p>


blocks|key|621840|text|用一个iron-list包装iron-selector+--这允许您选择/点击行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|621841|(注意:您可能需要删除自定义的indexAs="_id“属性以获得正确的行索引)|621842|<iron-selector+attr-for-selected="index"+on-tap="_itemSelected">
++++<iron-list+id="projectList"+items="[[projects]]"+as="projLI"+class="fit">
++++++++<template>
++++++++++++<div+class="layout+horizontal+center"+id="{{index}}">
++++++++++++++++
++++++++++++</div>
++++++++</template>
++++</iron-list>
</iron-selector>|code-block|syntax|javascript|621843|所选行项的聚合物法：|621844|_itemSelected:+function+(e)+{
++++console.log(e.target.id);+//+selected+iron-list+row+index
}|621845|entityMap^0|3|9|E|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

<p>Wrap your <code>iron-list</code> with an <code>iron-selector</code> - this allows you get to get the row selected / tapped. </p>

<p><em>(NB: you might need to remove your custom indexAs="_id" attribute to get the right row index)</em></p>

<pre><code>&lt;iron-selector attr-for-selected="index" on-tap="_itemSelected"&gt;
    &lt;iron-list id="projectList" items="[[projects]]" as="projLI" class="fit"&gt;
        &lt;template&gt;
            &lt;div class="layout horizontal center" id="{{index}}"&gt;
                &lt;!-- your row content here --&gt;
            &lt;/div&gt;
        &lt;/template&gt;
    &lt;/iron-list&gt;
&lt;/iron-selector&gt;
</code></pre>

<p>Polymer method for row item selected:</p>

<pre><code>_itemSelected: function (e) {
    console.log(e.target.id); // selected iron-list row index
}
</code></pre>


blocks|key|875805|text|我遇到了类似的问题，并使用<array-selector>解决了问题如下：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|875806|<iron-list+items="{{myarray}}"+as="ref">
++<template>
++++<div>
++++++<paper-checkbox+on-tap="toggleSelection"></paper-checkbox>
++++++<span>{{ref.name}}</span>
++++</div>
++</template>
</iron-list>
<array-selector+id="arrsel"+items="{{myarray}}"
++++++++++++++++selected="{{selectedName}}"+toggle></array-selector>|code-block|syntax|javascript|875807|myarray是一个对象数组：|875808|var+myarray+=+[{name:+"Alice"},+{name:+"Ben"},+...]|875809|函数toggleSelection的定义如下：|875810|toggleSelection:+function(e)+{
++console.log+("Selected+index+is+"+%2B+e.model.index);
++console.log+("Selected+name+is+"+%2B+e.model.ref);
++this.$.arrsel.select+(e.model.ref);
++console.log+("Current+selection:+",+this.selectedName);
}|875811|字段名ref在e.model.__之后是iron-list的as属性的值。|BOLD|875812|警告：聚合物1.0+iron-list文档(https://elements.polymer-project.org/elements/iron-list)中没有正式记录变量e.model，但是我在调试过程中发现了它。我假设e.model是一种公共属性(聚合物的编码风格使用下划线前缀表示私有属性，例如：_scroll_Position)，它不是反对的候选。|875813|entityMap|0|LINK|mutability|MUTABLE|url|https://elements.polymer-project.org/elements/iron-list^0|D|G|0|0|0|7|0|0|2|F|0|0|3|3|7|A|K|9|U|2|0|0|2|A|9|2F|7|34|7|48|G|M|1J|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|18|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1G|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1H|8|@$9|1I|A|1J|B|U]|$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|V|3|W|5|6|7|1Q|8|@$9|1R|A|1S|B|U]|$9|1T|A|1U|B|C]|$9|1V|A|1W|B|C]|$9|1X|A|1Y|B|C]|$9|1Z|A|20|B|C]]|D|@$9|21|A|22|1|23]]|E|$]]|$1|X|3|-4|5|6|7|24|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]]]

<p>I was having a similar issue and solved my problem using <code>&lt;array-selector&gt;</code> as follows:</p>

<pre><code>&lt;iron-list items="{{myarray}}" as="ref"&gt;
  &lt;template&gt;
    &lt;div&gt;
      &lt;paper-checkbox on-tap="toggleSelection"&gt;&lt;/paper-checkbox&gt;
      &lt;span&gt;{{ref.name}}&lt;/span&gt;
    &lt;/div&gt;
  &lt;/template&gt;
&lt;/iron-list&gt;
&lt;array-selector id="arrsel" items="{{myarray}}"
                selected="{{selectedName}}" toggle&gt;&lt;/array-selector&gt;
</code></pre>

<p>and <code>myarray</code> is an array of objects:</p>

<pre><code>var myarray = [{name: "Alice"}, {name: "Ben"}, ...]
</code></pre>

<p>and the function <code>toggleSelection</code> is defined as follows:</p>

<pre><code>toggleSelection: function(e) {
  console.log ("Selected index is " + e.model.index);
  console.log ("Selected name is " + e.model.ref);
  this.$.arrsel.select (e.model.ref);
  console.log ("Current selection: ", this.selectedName);
}
</code></pre>

<p>The field name <strong>ref</strong> after <code>e.model.__</code> is the value of the <code>as</code> attribute of <code>iron-list</code>.</p>

<p><strong>WARNING</strong>: The variable <code>e.model</code> is not officially documented on the Polymer 1.0 <code>iron-list</code> doc (<a href="https://elements.polymer-project.org/elements/iron-list" rel="nofollow">https://elements.polymer-project.org/elements/iron-list</a>), however I discovered it during my debugging session.  I am assuming that  <code>e.model</code> is a <em>public</em> property (the coding style of Polymer uses underscore prefix for <em>private property</em> such as: <code>_scroll_Position</code>) and it is not a candidate for deprecation.</p>


blocks|key|875922|text|遵循本演示的第154和184行概述的模型。。https://github.com/PolymerElements/iron-list/blob/master/demo/collapse.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|875923|my-element.html|875924|<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);
}|code-block|syntax|javascript|875925|关键是将事件和侦听器方法(在本例中为toggleMe())放置在iron-list的<template>中。这允许iron-list注册数组索引。|style|CODE|875926|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/PolymerElements/iron-list/blob/master/demo/collapse.html|1^0|0|L|0|M|23|1|0|0|0|I|A|W|9|16|A|1L|9|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]|$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@$A|17|B|18|M|N]|$A|19|B|1A|M|N]|$A|1B|B|1C|M|N]|$A|1D|B|1E|M|N]]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|V]]]]

<p><a href="https://github.com/PolymerElements/iron-list/blob/master/demo/collapse.html" rel="noreferrer">Follow the model outlined on lines 154 and 184 of this demo</a>.
<a href="https://github.com/PolymerElements/iron-list/blob/master/demo/collapse.html" rel="noreferrer">https://github.com/PolymerElements/iron-list/blob/master/demo/collapse.html</a></p>

my-element.html

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

<p>The key is to place the event and listener method (<code>toggleMe()</code> in this case) inside the <code>&lt;template&gt;</code> of the <code>iron-list</code>. This allows the <code>iron-list</code> to register the array index.</p>


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

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

                   &lt;!-- I use a paper-menu-button to display a list of available actions here --&gt;

                   &lt;!-- list item object content here such as: [[projLI.desc]] etc. --&gt;

               &lt;/div&gt;
           &lt;/paper-material&gt;
        &lt;/div&gt;
    &lt;/template&gt;
&lt;/iron-list&gt;
</code></pre>

<p>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 <code>projLI._id</code>), yet also be able to handle the internal <code>paper-menu-button</code> tap events in a different way?</p>

<p>I've eye-balled polymer 1.0's new event listeners (<a href="https://www.polymer-project.org/1.0/docs/devguide/events.html" rel="nofollow">https://www.polymer-project.org/1.0/docs/devguide/events.html</a>), 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 <code>iron-selector</code> 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).</p>

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


Tap listener for polymer iron-list item?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个使用iron-list来显示对象数组的自定义元素。每个项目通过模板生成，如下所示：<iron-list id="projectList" items="[[projects]]" indexAs="_id" as="projLI" class="layout flex">    <template>      ...

问高聚物铁清单项目的监听者？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问高聚物铁清单项目的监听者？EN