How to render template component variables as html

dev
1

Hey!

A quick one here.

I’ve got this code right here:

<script
  type="text/x-handlebars"
  data-template-name="/connectors/discovery-below/sidebar"
>
{{#if missions}}
        <h2>{{#if userName}}{{i18n (theme-prefix "sidebar.back")}} {{userName}} {{/if}}!</h2>
        <p>Voici vos missions:</p>
        <div class="mission">
            <h3>Mission du jour: {{missions.daily.mission.label}}</h3>
            <p>
                {{missions.daily.mission.description}}
            </p>
        </div>
    {{/if}}
</script>

Everything is alright, except that my “description” variable contains html.

It doesn’t get rendered in my template so it prints out ugly html on my frontend :arrow_down:

image
image551×532 20.7 KB

Is there a way to interpret what’s between brackets {{}} as html?

Where is the documentation regarding this? I’m currently reverse engineering existing code so that’s not ideal.

Thanks in advance for any tips!

2

Because it was originally designed to generate HTML, Handlebars escapes values returned by a {{expression}} . If you don’t want Handlebars to escape a value, use the “triple-stash”, {{{ .
Introduction | Handlebars

2 Likes
3

There’s htmlSafe:

https://api.emberjs.com/ember/release/functions/@ember%2Ftemplate/htmlSafe

1 Like