エスケープせずにハンドルバーテンプレートにHTMLを挿入する


143

今後の文字列でタグをエスケープせずに、htmlタグ付きの文字列をハンドルバーテンプレートに挿入する方法はありますか?

template.js:

<p>{{content}}</p>

テンプレートを使用する

HBS.template({content: "<i>test</i> 123"})

実際の結果:

<p>&lt;i&gt;test&lt;/i&gt; 123</p>

期待される結果:

<p><i>test</i> 123</p>

回答:


348

のようにしてみてください

<p>{{{content}}}</p>

私は私の答えをサポートする公式のリファレンスを得ました:

によって返されるハンドルバーHTMLエスケープ値{{expression}}ハンドルバーで値をエスケープしたくない場合は、「トリプルスタッシュ」を使用し{{{ます。


27
一度は、簡単なもの。
Madbreaks、2016年

7
正直、気づきにくいので彼らが選ぶことができた最悪のことのように思えます。何か簡単ではあるが目に見えるような理由だけではありません{{ rawHtml expression }}
danneu

1
@danneuに同意します。魔法やかわいらしい速記はご遠慮ください。長期的には明示的の方が優れています。
マット


11

Handlebarsのドキュメントによると、http://handlebarsjs.com/expressions.html

ドキュメントからの引用

ハンドルバーで値をエスケープしたくない場合は、「トリプルスタッシュ」を使用します。 {{{

未加工のHTMLをHandlebarsテンプレートに渡し、三重括弧を使用して未加工のHTML出力を取得します。

{{{foo}}}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.