版權宣告：本作品採用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。轉載請註明來源http://blog.csdn.net/azureternite https://blog.csdn.net/azureternite/article/details/53037695

場景

使用{{expression}}時，輸出的內容會被轉義，如：

<div>{{title}}</div>

context為

{
  title: '<p>Hello world</p>'
}

結果生成html：

<div>&lt;Hello world&gt;</div>
 

最終在頁面上顯示的就是字串<p>Hello world</p>

如果不想進行html的轉義，有兩種方法：

{{{SafeString}}}

在模板中將兩個花括號替換成三個花括號，即可避免html字串被轉義

<div>{{title}}</div>
<div>{{{body}}}</div>

傳入的context為

{
  title: '<p>Hello world</p>',
  body: '<p>Hello world</p>'
}

生成的結果：

<div>&lt;Hello world&gt;</div>
<div><p>Hello world</p></div>

頁面上顯示的就是

<p>Hello world</p>
Hello world

SafeString

Handlebars提供一個SafeString方法，使用這個方法返回的值即便在{{expression}}中也不會被轉義

Handlebars模板：

{{sayhi}}

JavaScript:

Handlebars.registerHelper('sayhi', function(){
  var str = '<p>Hello world</p>';
  return new Handlebars.SafeString(str);
});
 

參考

• Handlebars.js: Minimal Templating on Steroids