编译后如何将事件侦听器添加到 Handlebars 模板？

Question

我有一个简单的模板设置，如下所示：

<script id="entry" type="text/x-handlebars-template">                                                                                                                                                           

  <p>Some content</p>                                                                                                                                                                                           
  <h2>Language Select:</h2>                                                                                                                                                                                     

  <button type="button" class="btn btn-primary">English</button>                                                                                                                                                                                                                                                                                               

  <h2>Ready:</h2>                                                                                                                                                                                               
  <button type="button" id="play" class="btn btn-success">Play</button>                                                                                                                                         
  <button type="button" id="stop" class="btn btn-danger">Stop</button>                                                                                                                                                                                                                                                                                                               

</script>

但是，在我的文档中我还有一个包含以下内容的脚本：

var playButton = document.querySelector('#play');

playButton.addEventListener('click', function (e) {                                                                                                                                                               
  sendMessage('Cue', 'Play');                                                                                                                                                                                     
}, false);

大多数时候（但不总是）因为 javascript 的异步性质，这个 returns:

Uncaught TypeError: Cannot read property 'addEventListener' of null

如果我将该代码包装在一定数量的 setTimeout 中，它将始终有效。

有人可以向我解释从脚本向生成的模板内容添加事件侦听器的最佳方法吗？

我查看了 this answer，但他们建议的方式似乎只是在添加事件侦听器之前添加延迟。

Answer 1

抱歉，忘了我之前的回答了。

您首先需要渲染模板，然后将此 html 插入正文...

var source = document.querySelector("#some-template").innerHTML; 
var template = Handlebars.compile(source);
document.body.innerHTML = template();

然后添加监听器...

http://jsfiddle.net/jwrae0n2/

编译后如何将事件侦听器添加到 Handlebars 模板？

How do I add event listeners to Handlebars templates after compilation?

javascript

templating

handlebars.js