Handlebars.js raw-helper

Question

I have a handlebars template that works great. I'd like to be able to put the following in it:

<script id="someTemplate" type="text/x-handlebars-template">
    <div class="editStuff">
        <span {{#if aThing}} data-someKey="{{anotherThing}}" {{/if}}>
            {{aThirdThing}}
        </span>
    </div>
</script>

This obviously would render when the handlebars file is processed. all of the {{}}'s end up being blank, no good. I found the

{{{{raw-helper}}}}

block helper, and tried it out like so:

{{{{raw-helper}}}}
<script id="someTemplate" type="text/x-handlebars-template">
    <div class="editStuff">
        <span {{#if aThing}} data-addresskey="{{anotherThing}}" {{/if}}>
            {{aThirdThing}}
        </span>
    </div>
</script>
{{{{/raw-helper}}}}

but this ends up removing the entire script block from the HTML.

According to the Handlebars docs anything within the raw block should be rendered untouched.

I did try registering the helper mentioned in the docs, just in case it wasn't actually included, but that did not help either.

Answer 1

You can just escape your mustaches:

<script id="someTemplate" type="text/x-handlebars-template">
    <div class="editStuff">
        <span \{{#if aThing}} data-someKey="\{{anotherThing}}" \{{/if}}>
            \{{aThirdThing}}
        </span>
    </div>
</script>

Certainly not the prettiest solution but it works fine.