テンプレートコンポーネントの変数をHTMLとしてレンダリングする方法

開発
1

こんにちは！

ちょっとだけ質問があります。

こちらにコードがあります：

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

ほとんど問題ないのですが、「description」変数に HTML が含まれています。

テンプレート内で正しくレンダリングされず、フロントエンドに汚い HTML がそのまま表示されてしまいます：:arrow_down:

image
image551×532 20.7 KB

{{}} の中身を HTML として解釈する方法はありますか？

これに関するドキュメントはどこにありますか？現在は既存のコードをリバースエンジニアリングしているので、理想的ではありません。

アドバイスをお願いいたします！

2

本来 HTML を生成するように設計されていたため、Handlebars は {{expression}} で返される値をエスケープします。値のエスケープを回避したい場合は、「トリプル・スタッシュ」{{{ を使用してください。
Introduction | Handlebars

3

htmlSafe があります：

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