Question

我在地图上显示了几个google-map-marker：

<template is="dom-repeat" items="{{deviceData}}" as="data">
    <google-map-marker latitude="{{data.lat}}" longitude="{{data.long}}"
        title="{{data.name}}" click-events on-google-map-marker-click="markerClicked"
        icon="/images/icon-0-75x.png">
    </google-map-marker>
  </template>

如何在“markerClicked”事件中引用{{data}}对象？

markerClicked: function(e, detail, sender) {
}

我想展示一张带有数据对象详细信息的纸卡。

Answer 1

最简单的方法：

<google-map-marker ... data-details$="{{data}}" ... />

并在侦听器回调中添加以下内容

markerClicked: function(e, detail, sender) {
    var data = e.currentTarget.getAttribute('data-details');
    // do data stuff.!
}

Answer 2

艾哈迈德的解决方案可行，但这不是最佳方式。原因是因为data-details$="{{data}}"会将data变量的内容序列化为市场元素上的字符串属性值。

相反，你可以refer to the template elements in event handlers。以下是您在示例中的工作原理：

markerClicked: function(e) {
   var data = e.model.data;
   // do data stuff.!
}

唯一重要的一点是e.model.data的最后一部分必须与as属性的值匹配。如果省略该属性，则应改为编写e.model.item，与在重复模板中绑定时使用的相同。

聚合物google-map-marker点击参考数据绑定对象

2 个答案: