Comment rendre les variables de composant de modèle en HTML

Dev
1

Salut !

Une petite question rapide.

J’ai ce code ici :

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

Tout fonctionne bien, sauf que ma variable « description » contient du HTML.

Il n’est pas rendu dans mon template, donc le HTML brut s’affiche de manière peu esthétique sur mon frontend :arrow_down:

image
image551×532 20.7 KB

Existe-t-il un moyen d’interpréter ce qui se trouve entre accolades {{}} comme du HTML ?

Où trouver la documentation à ce sujet ? Je suis en train de faire de l’ingénierie inverse sur du code existant, ce qui n’est pas idéal.

Merci d’avance pour vos conseils !

2

Parce qu’il a été conçu à l’origine pour générer du HTML, Handlebars échappe les valeurs renvoyées par une {{expression}}. Si vous ne souhaitez pas que Handlebars échappe une valeur, utilisez le « triple-trait », {{{.
Introduction | Handlebars

3

Il y a htmlSafe :

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