템플릿 컴포넌트 변수를 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가 값을 이스케이프하지 않기를 원하시면 "triple-stash"인 {{{ 를 사용하세요.
Introduction | Handlebars

3

htmlSafe가 있습니다:

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