jquery: load html from a file without html-encoding entity text? (such as '{{>' for use with Handlebars partial templates)

Question

Edit: found a solution Another user added a solution (that works) but then edited it, so I'm adding what I saw here for others:

The original template was in a <div> which is treated as text/html. I've replaced the <div> with this <script> and everything works as expected:

<script id="template-id" type="text/x-handlebars-template">

Original posting

I have all my Handlebars templates written out in separate html files. Until now I've used the following to load the source of the templates and expand them without a problem:

$.get(path,
    function(templates, textStatus, jqXhr) {
        var source = $(templates).filter(templateId).html();
        var template = Handlebars.compile(source);

        /* ... */

The source then contains the template code. It has worked beautifully with simple templates. I even started using partials to add attributes to my html entities:

    <div class="pull-left label label-default tracking-item-data pointable"
         item-id="{{ItemId}}"
         data-id="{{Id}}"
         title="{{> tooltip}}">
        {{#if ExternalId}}{{ExternalId}}{{else}}Ignored{{/if}}
    </div>

That works fine.

However, now I'm adding a partial into the text of the entity (not just as an attribute) and things are breaking. Here's the template:

<ul class="list-unstyled list-inline">
    {{#Data}}
    <li title="{{> tooltip}}">{{> datalabel}}</li>
    {{/Data}}
</ul>

When the source loads in my javascript above, it contains this instead of the expected value with proper Handlebars partial syntax:

<ul class="list-unstyled list-inline">
    {{#Data}}
    <li title="{{> tooltip}}">{{&gt; datalabel}}</li>
    {{/Data}}
</ul>

Note how the {{> datalabel}} partial was encoded to {{> datalabel}} when read from the .html() method.

It appears to me that partials in the entity text are being encoded. This breaks my Handlebars methods. How do I prevent the html from encoding when loading

Answer 1

I've found a workaround: encode and then decode the source to pull out the proper html text. This fixes the issue and {{> is decoded back to {{>. Here's the fix:

$.get(path,
    function(templates, textStatus, jqXhr) {
        var source = $(templates).filter(templateId).html();
        source = $('<div/>').html(source).text();

        var template = Handlebars.compile(source);