如何将模板组件变量渲染为 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

由于 Handlebars 最初设计用于生成 HTML，它会对 {{expression}} 返回的值进行转义。如果您不希望 Handlebars 转义某个值，请使用“三重花括号” {{{。
Introduction | Handlebars

3

有 htmlSafe：

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