聚合物事件参数重复

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

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

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

由于两个 ID 不能相同，我可以在 ID 上附加一些文本以使其不同。但是我不赞成这种做法。任何人都可以阐明如何在重复模板中响应事件，以便我们可以知道调用了哪个项目。

谢谢，苏梅什

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

我想我会 post 为那些使用 Polymer 1.x 的人更新 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

聚合物事件参数重复

Polymer event parameters on repeat

polymer