If you are ready do write a little bit of javascript, you can do this. I don't know the framwork(s) that you are using, so I will suppose that you have jQuery, but you can use the idea without using jQuery if you don't want to.
First, write all your tags that serve as template in divs with the "tmpl_handlebars" css class instead of scripts:
<div class="tmpl_handlebars" id="tmpl_places">
<article>
<h1>Hello, World!</h1>
<p>This is a template...</p>
</article>
</div>
Then, when your page has loaded, dynamically replace the div tags with the script tags, and transfer the id and the content of the div tags to the script.
With jQuery you just have to add this small script in your html head.
$(function() {
$(".tmpl_handlebars").each(function() {
var $this = $(this);
var children = $this.children().detach();
var id = $this.attr("id");
$this.replaceWith(
$('<script type="tmpl_handlebars"/>')
.attr("id", id)
.append(children);
);
});
});
This may work out of the box, but as I'm not a specialist of mustache and handlebars, I don't know exactly when they process the DOM to find the templates, so if you want to be perfectly safe, you should do this third step: Remove the script tags that include these libraries from the static html of your head, and instead, add them dynamically with javascript after the processing of the divs, so your dom is ready when the scripts arrive.
Before the last });
in the code the divs processing, add the following lines to add your scripts:
$("head").append('<script type="text/javascript"'
+ 'src="**LOCATION_OF_DYNAMICALLY_LOADED_FILE**"></script>'");
//etc...