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的异步性质，这会返回：

Uncaught TypeError: Cannot read property 'addEventListener' of null

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

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

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

Answer 1

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

首先需要渲染模板，然后将此html插入到body ...

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

然后添加监听器......

http://jsfiddle.net/jwrae0n2/

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

1 个答案: