javascript - 如何使用 Meteor 中的信息窗口按钮触发模式/弹出窗口？

Question

我有一个 Google map 信息窗口。 InfoWindow 的内容来 self 的 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中的勾号。

我想访问 contentString 中的按钮，以便它触发模式/弹出窗口。我想到了以下几点:

1. 以某种方式将 Meteor 模板放入我的 contentString 中，然后使用按钮的模板事件。

2. 我可以添加一个事件监听器。当我console.log($('#moreDetailsButton').html())但我不能将它用于我的事件监听器:

   google.maps.event.addListener($('#moreDetailsButton').html(), 'click', function(
       console.log('button clicked')
   })
   

我做错了什么？我缺少什么？有什么建议吗？

Answer 1

您应该能够以正常的 meteor 方式从包含 map 的模板访问该事件:

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

您可以在信息窗口中使用模板，但我发现这很奇怪，因为该模板不是 react 性的，因为它是在声明信息窗口时呈现的。我发现更简单的方法是使用普通模态而不是提供的信息窗口。编辑:为了显示正确的数据，您可以使用标记的 id(或实例化标记时可用的任何数据)和 session 变量:

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

然后根据 session 变量信息在模态模板中显示正确的内容。如果您只想显示标记的 id:

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