高聚物铁清单项目的监听者？
我有一个使用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实际点击的)，同时也能够以不同的方式处理内部的paper-menu-button抽头事件？
我已经注意到Polymer1.0的新事件侦听器(https://www.polymer-project.org/1.0/docs/devguide/events.html)，作为一种可能的方法，它试图侦听不同的元素点击事件(如页面中的示例1所示)，但我不确定这在这里是否有效。我还考虑过在铁列表中使用iron-selector吗？这可行吗？考虑到铁选择器只有一个子元素(即铁列表元素，而不是模板化的子元素)，我也不确定它是否会起作用。
我觉得我错过了一种很简单的方法来完成这件事。谁能给我看看灯吗？
回答 5
Stack Overflow用户
发布于 2015-08-11 11:19:47
为此，我在list元素id中编码数组索引，然后从list item事件目标中提取id。这是一个聚合物元素的例子，可以做到这一点。
<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>Stack Overflow用户
发布于 2016-01-04 01:08:23
遵循本演示的第154和184行概述的模型。。https://github.com/PolymerElements/iron-list/blob/master/demo/collapse.html
my-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())放置在iron-list的<template>中。这允许iron-list注册数组索引。
Stack Overflow用户
发布于 2015-08-19 06:07:19
我遇到了类似的问题，并使用<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);
}字段名ref在e.model.__之后是iron-list的as属性的值。
警告：聚合物1.0 iron-list文档(https://elements.polymer-project.org/elements/iron-list)中没有正式记录变量e.model，但是我在调试过程中发现了它。我假设e.model是一种公共属性(聚合物的编码风格使用下划线前缀表示私有属性，例如：_scroll_Position)，它不是反对的候选。
https://stackoverflow.com/questions/31888111
复制相似问题
腾讯云开发者
