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

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

本文关键字:添加 Handlebars 侦听器 事件 编译      更新时间:2023-09-26

我有一个简单的模板设置,如下所示:

<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中,它将始终有效。

有人能向我解释一下将脚本中的事件侦听器添加到生成的模板内容中的最佳方法吗?

我看了这个答案,但他们建议的方式似乎只是在添加事件侦听器之前添加一个延迟。

对不起,忘记我以前的回答了。

您需要先为渲染模板,然后将此html插入正文。。。

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

然后添加侦听器。。。

http://jsfiddle.net/jwrae0n2/