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>

什么是最好的聚合物友好方法，用于检测铁列表项目本身的点击事件（理想情况下知道通过projLI._id实际点击了哪个项目），同时还能够处理内部{{ 1}}以不同方式点击事件？

我的眼球聚合物1.0的新事件监听器（https://www.polymer-project.org/1.0/docs/devguide/events.html），作为一种可能的方法，试图侦听不同的元素抽头事件（如示例1所示）页面），但我不确定这是否会起作用。我还考虑过以某种方式在铁列表中使用paper-menu-button？那可行吗？我不确定它是否会起作用，因为铁选择器只会有一个孩子（即铁列表元素，而不是它的模板儿童）。

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

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

我-element.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>的{{1}}内。这允许iron-list注册数组索引。

Answer 2

我是通过在列表元素id中编码数组索引，然后从列表项事件目标中提取id来实现的。以下是执行此操作的示例Polymer元素。

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

Answer 3

我遇到了类似问题并使用<array-selector>解决了我的问题，如下所示：

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

和myarray是一个对象数组：

var myarray = [{name: "Alice"}, {name: "Ben"}, ...]

并且函数toggleSelection定义如下：

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);
}

e.model.__后的字段名称参考是as的{{1}}属性的值。

警告：变量iron-list未在Polymer 1.0 e.model doc（https://elements.polymer-project.org/elements/iron-list）上正式记录，但我在调试会话期间发现了它。我假设iron-list是 public 属性（Polymer的编码样式使用私有属性的下划线前缀，例如：e.model）并且它不是弃用的候选人。

Answer 4

我刚刚解决了我的问题https://groups.google.com/forum/#!topic/polymer-dev/r9IsUKVnLVM。阅读本文档https://www.polymer-project.org/1.0/docs/devguide/events.html。

我希望它可以帮到你！

点击聚合物铁列表项目的听众？

4 个答案: