Como renderizar variáveis de componente de template como HTML

Dev
1

Ei!

Uma coisa rápida aqui.

Tenho este código aqui:

<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>

Tudo está correto, exceto que minha variável “description” contém HTML.

Ela não é renderizada no meu template, então imprime um HTML feio no meu frontend :arrow_down:

image
image551×532 20.7 KB

Existe uma maneira de interpretar o que está entre chaves {{}} como HTML?

Onde está a documentação sobre isso? Atualmente estou fazendo engenharia reversa de código existente, o que não é ideal.

Obrigado antecipadamente por qualquer dica!

2

Como foi originalmente projetado para gerar HTML, o Handlebars escapa os valores retornados por uma {{expressão}}. Se você não quiser que o Handlebars escape um valor, use o “triple-stash”, {{{.
Introduction | Handlebars

3

Existe o htmlSafe:

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