Question

我正在研究Polymer，并且在这方面很新。

我有一个使用模板迭代的列表。需要有一个删除按钮。点击删除我正在调用一个函数。我们如何知道调用了哪个列表项，以便我可以删除该项。

<template repeat="{{ data in listData }}">
<div>
   <img src="../../Styles/images/edit.png" alt="">
   <img src="../../Styles/images/remove.png" alt="">
</div>
</template>

我之前正在进行删除

<img src="../../Styles/images/remove.png" alt="" id="data.id" on-click={{remove}}"">

因此，在删除函数时，我使用函数处理程序中的event参数获取Id。现在，我也有这个编辑。所以，现在用同样的方法，我将有一个编辑ID，如下所示。

<img src="../../Styles/images/edit.png" alt="" id="data.id" on-click={{remove}}"">

由于两个id不能相同，我可以附加一些文本以及id以使其不同。但是我并不赞成这种做法。任何人都可以了解如何响应重复模板中的事件，以便我们可以知道要求的项目。

谢谢， Sumesh

Answer 1

传递给事件处理程序的事件的目标字段引用该项。元素的templateInstance引用绑定模型。

selectStory: function(e, detail, sender) {
  var story = e.target.templateInstance.model.s;
  console.log("Clicked " + story.headline);
  this.loadStory(story.id); // accessing non-rendered data from the model
}

另见https://www.polymer-project.org/docs/polymer/databinding.html（页面底部）

您也可以使用您的方法，只使用其他属性名称。据我所知，无论如何都不鼓励绑定到id。

Answer 2

我以为我会为那些使用Polymer 1.x的人发布更新。

传递给声明性事件处理程序的事件参数现在有一个model属性。

示例：

<template is="dom-repeat" items="{{listData}}">
  <div>
    <img src="../../Styles/images/edit.png" alt="">
    <img src="../../Styles/images/remove.png" alt="" on-click="_remove">
  </div>
</template>

<script>
  Polymer({
    ...

    _remove: function(e) {
      // item from listData available in e.model
    }
  });
</script>

此处有更多信息：https://www.polymer-project.org/1.0/docs/devguide/templates.html#handling-events

聚合事件参数重复

2 个答案: