如何使用 Meteor 中的信息窗口按钮触发 modal/pop 向上？

Question

我有一个 Google 地图信息窗口。 InfoWindow 的内容来自我的 JS 中一个名为 contentString 的变量。

//content of InfoWindow
contentString = 
'<div class="alertPreview">
    <img class="alertPreviewImage" src="">
    <h3 class="alertPreviewTitle">' + 
        document.alertName + 
    '</h3> 
    <h6 class="alertPreviewLocation">' + 
        document.alertMunicipality + 
        '' + 
        document.alertProvince + 
    '</h6>
    <text class="alertPreviewContent">' + 
        document.alertDetails +
        '</br>
    </text>
    <button type="button" id="moreDetailsButton" class="btn btn-link alertDetailsButton">
        More Details 
     </button>
 </div>'

注意上面代码中的单引号在JS中是tick

我想访问 contentString 中的按钮，以便它触发 modal/pop。我在想以下几点：

以某种方式在我的 contentString 中放置一个 Meteor 模板，然后为按钮使用模板事件。
我可以添加事件侦听器。我的按钮值在我打印时打印 console.log($('#moreDetailsButton').html()) 但我不能将它用于我的事件侦听器：
```
google.maps.event.addListener($('#moreDetailsButton').html(), 'click', function(
    console.log('button clicked')
})
```

我做错了什么？我错过了什么？有什么建议吗？

Answer 1

您应该能够以正常的流星方式从包含您的地图的模板访问事件：

Template.map.events({
   "click #moreDetailsButton": function(e,t){ 
      console.log('hello');
   } 
})

您可以在信息窗口中使用模板，但我发现这很奇怪，因为模板在声明信息窗口时呈现时不是反应性的。我发现一个更简单的方法是使用普通模式而不是提供的信息窗口。编辑：为了显示正确的数据，您可以使用标记的 ID（或实例化标记时可用的任何数据）和会话变量：

  marker.addListener('click', function() {
     Session.set('iwModalData', marker.id);
     $('#alertPreviewModal').modal('show');
  });

然后根据会话变量信息在模态模板中显示适当的内容。如果您只想显示标记的 ID：

Template.iwModalContent.helpers({
   "iwContent": function(){
      return Session.get('iwModalData');
   }
})

如何使用 Meteor 中的信息窗口按钮触发 modal/pop 向上？

How do I trigger a modal/pop up using an infowindow button in Meteor?

javascript

jquery

google-maps

meteor

infowindow