Cómo renderizar variables de componentes de plantilla como HTML

Desarrollador
1

¡Hola!

Una consulta rápida.

Tengo este código aquí:

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

Todo está bien, excepto que mi variable “description” contiene HTML.

No se renderiza en mi plantilla, por lo que imprime un HTML feo en mi frontend :arrow_down:

image
image551×532 20.7 KB

¿Hay alguna forma de interpretar lo que está entre llaves {{}} como HTML?

¿Dónde está la documentación sobre esto? Actualmente estoy haciendo ingeniería inversa del código existente, así que no es lo ideal.

¡Gracias de antemano por cualquier consejo!

2

Dado que originalmente fue diseñado para generar HTML, Handlebars escapa los valores devueltos por una {{expresión}}. Si no deseas que Handlebars escape un valor, utiliza el “triple guion bajo”, {{{.
Introduction | Handlebars

3

Hay htmlSafe:

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