在 Meteor 中使用 Template.myTemplate() 时未触发事件

Question

我试图在谷歌地图信息窗口中捕捉点击按钮事件。为此，我有以下内容

<!-- Html file -->
<template name="infoWindowContent">
  <button>Click Me!</button>
</template>

然后我在 client.js 上有这个

//Client js file

//Function that renders the template. Gets called from a user's action
function showInfoWindow(map, marker) {
  var infoWindow = new google.maps.InfoWindow();
  //This is the line that generates the template's html
  var infoWindowHtmlContent = Template.infoWindowContent();
  infoWindow.setContent(infoWindowHtmlContent);
  infoWindow.open(map, marker);
}

//Template events
Template.infoWindowContent.events = {
  'click button': function(event){
    console.log('event was triggered', event);
  }
}

infoWindow 显示在地图上并包含按钮，但是当单击该按钮时，控制台中不会显示任何日志。对此有任何线索吗？如何捕获使用 Template.myTemplate() 呈现的某些元素调度的事件？

Answer 1

函数 Template.template() 返回纯 html 字符串。它没有启用任何 Meteor 属性。您需要的是一个注入了适当行为的 DOM 元素。

...
var node = Meteor.render(Template.infoWindowContent());
outerElement.appendChild(node);
...

我不确定如何在google maps api中使用DOM节点，但如果可能的话，应该很容易。

 

---

 

另外，使用适当的事件形式，从长远来看可以省去很多麻烦：

Template.infoWindowContent.events({
  ...
});