Handlebars HTML转义

版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 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