在 Polymer 中从发送者获取数据值

Question

我正在尝试在 Polymer 中创建一个灯箱组件，它的子项是多个 <img> 标签。这些将有一个 src，这是一个缩略图和一个 data-fullimage 属性，它将包含完整尺寸图像的路径。

在 Polymer 组件中，我在图像内容选择器上设置了点击标签，任何 Javascript 调用都使用 sender.xyz return content标签，而不是图像标签，因此不允许我检索完整图像的路径。有什么方法可以获取被点击图像的 data-fullimage，甚至 src 值（如果需要）？

聚合物成分

imageClick: function(event, detail, sender) 
{
      console.log(sender);
}

实施

<paper-lightbox>
    <img src="img/one.png" data-fullimage="img/one-large.png"></img>
    <img src="img/two.png" data-fullimage="img/two-large.png"></img>
</paper-lightbox>

Answer 1

试试这个

HTML:

<paper-lightbox>
   <img src="img/one.png" on-tap="{{imageTap}}" data-fullimage="img/one-large.png"></img>
   <img src="img/two.png" on-tap="{{imageTap}}" data-fullimage="img/two-large.png"></img>
</paper-lightbox>

JS:

imageTap: function(sender){
    var fullImage = sender.target.attributes["data-fullimage"];
}

Answer 2

无需在 img 标记上放置点击处理程序。此外，这不起作用，因为它们未绑定到 paper-lightbox 元素中的函数。你要的是

event.path[0].getAttribute("data-fullimage")

但这只有在您的 DOM 元素仅由一个元素组成时才有效。如果您的 light DOM 元素更复杂，但应该可以在任何地方单击它们，请改用此表达式

event.path[[].indexOf.call(event.path, sender) - 1].getAttribute("data-fullimage")

在 Polymer 中从发送者获取数据值

Getting data- value from sender in Polymer

javascript

polymer