Handlebars Mẫu hiển thị mẫu dưới dạng văn bản

Question

Tôi đã tạo một trình trợ giúp trong Handlebars để trợ giúp với logic, nhưng mẫu của tôi phân tích cú pháp html được trả về dưới dạng văn bản thay vì html.

Tôi có một trang kết quả bài kiểm tra mà được trả lại sau khi bài kiểm tra được hoàn thành:

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

Đối với mỗi viên đạn, tôi sử dụng một helper để xác định mẫu sẽ hiển thị kết quả của một vòng:

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"); 
    } 
    }); 

đây là một mẫu mô tả một vòng đúng (chúng ta hãy nói điều đó khiến cho # mẫu vòng-end-chính xác):

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

Đây là những gì được hiển thị:

<div></div> 

Không phải HTML, nhưng dưới dạng văn bản. Làm cách nào để tôi thực sự hiển thị HTML dưới dạng HTML chứ không phải văn bản?

Answer 1

Tôi giả định rằng không thoát trong Handlebars hoạt động giống như trong vanilla Mustache. Trong trường hợp đó sử dụng ria ba để không dò tìm html, i, e: {{{unescapedhtml}}}, như:

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

cho see ref: câu trả lời http://mustache.github.com/mustache.5.html

Answer 2

Geert-Jan là đúng nhưng chỉ để tham khảo bạn cũng có thể đặt kết quả thành "an toàn" trực tiếp bên trong trình trợ giúp (mã từ wiki 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); 
}); 

Với điều đó bạn có thể sử dụng các thanh ghi kép thông thường {{}} và các tay lái sẽ không thoát khỏi biểu thức của bạn.