How to render a javascript template inside Genshi?

Question

I'd like to render a mustache/handlebars template inside a genshi template. Genshi seems to raise a TemplateSyntaxError because of the mustache tags.

I've tried to put CDATA tags, as posted here, either inside and outside <script>:

<script id="some-template" type="text/x-mustache-template">
    <![CDATA[
    ... my template here ...
    ]]>
</script>

Since I do $('#some-template').html(), Handlebars just renders the CDATA tag together with the rest of the html, which messes the result.

<![CDATA[
<script id="some-template" type="text/x-mustache-template">
    ... my template here ...
</script>
]]>

This way, the browser comments the first <script> tag.

Also, commenting the CDATA with <!-- --> raises the error, and inside the script with /* */ just causes Handlebars to print it as is.

Is there any way to tell Genshi not to parse a chunck of the template?

Thanks!

Answer 1

Not sure if this helps, but I ran into a similar problem.

I have a chunk of markup that is being run through an XML parser, which adds a handlebars template to the DOM that will later be compiled by script.

In order to get the handlebars template past the XML parser, I needed to wrap with a CDATA block, but that was causing similar issues to yours. If I put the CDATA inside the script tags, the first bit of template markup was being swallowed in a comment. If I put them outside, the entire template was being commented and was unreachable by the script call to compile it.

I was able to get around it by inserting an HTML comment as an unnecessary shield to get swallowed, like so:

<div id="contentChunk">
    <div id="blah" class="foo">
        Some vanilla HTML being added.
    </div>
    <script id="hbTemplate" type="text/x-handlebars-template">
        <![CDATA[
        <!-- blocker comment: first html node of handlebars script gets swallowed. -->
        {{#each data.items}}
        <div id="item{{id}}">{{{name}}}</div>
        {{/each}}
        <!-- ]]> -->
    </script>
</div>

I also wrapped the trailing CDATA close tag in comments, otherwise I was getting a literal ]]> to render.

Answer 2

You could put your CDATA delimiters within mustache comments:

<script id="some-template" type="text/x-mustache-template">
    {{! <![CDATA[ }}
    ... my template here ...
    {{! ]]> }}
</script>

(This is essentially the same trick as using // <![CDATA[ and // ]]> for JavaScript scripts.)