如何使用Meteor中的信息窗口按鈕觸發模式/彈出窗口？

Question

我有一個Google Maps InfoWindow。 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中的勾號。

我想訪問contentString的按鈕，以便它觸發模式/彈出窗口。 我在想以下幾點：

1. 以某種方式將Meteor模板放置在我的contentString ，然后對按鈕使用模板事件。

2. 我可以添加一個事件監聽器。 當我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');
   } 
})

您可以在infowindow中使用模板，但是我發現這很奇怪，因為該模板在聲明infowindow時呈現，因此沒有反應性。 我發現一種更簡單的方法是使用普通模式而不是提供的信息窗口。 編輯：為了顯示正確的數據，您可以使用標記的ID（或實例化標記時可用的任何數據）和會話變量：

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

然后從會話var信息中在模式模板中顯示適當的內容。 如果您只想顯示標記的ID：

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