핸들 막대 텍스트로 템플릿 렌더링 템플릿

Question

로직을 돕기 위해 핸들 막대에서 도우미를 만들었지 만 템플릿은 HTML 대신 텍스트로 반환 된 HTML을 구문 분석합니다.

나는 퀴즈가 완료된 후 렌더링되는 퀴즈 결과 페이지가 :

Handlebars.registerHelper("round_end_result", function() { 
    if (this.correct) { 
     var source = ''; 
     if (this.guess == this.correct) { 
     console.log("correct guess"); 
     var source = $("#round-end-correct").html(); 
     } else { 
     var source = $("#round-end-wrong").html(); 
     } 
     var template = Handlebars.compile(source); 
     var context = this; 
     var html = template(context); 
     console.log(html); 
     return html; 
    } else { 
     console.log("tie"); 
    } 
    }); 

: 라운드의 각각에 대해

<script id="quiz-result" type="text/x-handlebars-template"> 
     {{#each rounds}} 
      {{round_end_result}} 
     {{/each}} 
     <div class="clear"></div> 
    </script> 

을, 나는 라운드의 결과를 렌더링 할 템플릿을 결정하기 위해 도우미를 사용

<script id="round-end-correct" type="text/x-handlebars-template"> 
     <div></div> 
    </script> 

: 여기

은 정확한 라운드를 설명하는 템플릿 (는 # 라운드 최종 올바른 템플릿을 렌더링 말의가 보자)입니다 여기

렌더링됩니다 것입니다 :

<div></div> 

하지 HTML로서가 아니라 텍스트로. 텍스트를 HTML이 아닌 HTML로 렌더링하려면 어떻게해야합니까?

Answer 1

핸들 바에서 언 이스케이프하는 것이 바닐라 콧수염과 동일하다고 가정합니다. 같은 {{{unescapedhtml}}}을 : 심판 참조하십시오

<script id="quiz-result" type="text/x-handlebars-template"> 
    {{#each rounds}} 
     {{{round_end_result}}} 
    {{/each}} 
    <div class="clear"></div> 

:이 경우 는 HTML, I, E 이스케이프 처리하는 트리플 콧수염을 사용 http://mustache.github.com/mustache.5.html

Answer 2

거트 얀의 답변이 정확하지만, 단지 참조 도우미 (handlebars.js 위키의 코드)에서 직접 결과를 "안전"으로 설정할 수 있습니다 (handlebars.js 위키의 코드)

Handlebars.registerHelper('foo', function(text, url) { 
    text = Handlebars.Utils.escapeExpression(text); 
    url = Handlebars.Utils.escapeExpression(url); 
    var result = '<a href="' + url + '">' + text + '</a>'; 
    return new Handlebars.SafeString(result); 
}); 

그걸로 정규 이중 핸들 바 {{}}를 사용할 수 있고 핸들 바가 표현을 벗어나지 않습니다.