Rendering Javascript code in nested mustache templates with mustache.js handlebars.js ICanHaz.js

Question

Is it possible to render Javascript in nested mustache.js templates as follows?

myApp.mustache:

{{#myapp}}
{{>userApp}}
{{/myapp}}

userApp.mustache:

{{#user}}
<script>
  $(function () {
    $("a[id='a_popover_{{username}}']").popover()
  })
</script>
{{/user}}

The templates render correctly with pystache (Python's mustache library), but mustache.js, handlebars.js, ICanHaz.js, and ICanHandlebarz.js all complain something like #user was not closed properly.

Answer 1

Pretty sure the </script> bit is the problem, the browser sees that and parses it as end of the template script. Try escaping it like so: <\/script>

Answer 2

I was also stuck into similar issue, what ended up was creating a new script element, because even if the javascript code was rendered , is was not executed after appending into the body, it acts like string.

$('script:last').html('alert("ok !")'); // won't work

sample code for my case:

var render = Mustache.to_html(template, data_sources);
var sc  = document.createElement('script');
sc.innerHTML = render;
var p_div = document.getElementById('template_wrap_div').parentNode;
p_div.innerHTML = "";
p_div.appendChild(sc);

Hope that gives some idea and help.