Handlebars.js: を含む<script>tag in a template?</script>

作成日 2013年05月20日  ·  17コメント  ·  ソース: handlebars-lang/handlebars.js

コンテンツにいくつかの要点を含めようとしていますが、ハンドルバーテンプレートに<script src="https://gist.github.com/4332573.js"/></script>を追加すると、明らかに壊れます。

スクリプトタグを「エスケープ」する方法はありますか?

feature

最も参考になるコメント

このようなスクリプトをエスケープすることはできませんか? おそらくあまり安全ではありませんが...

<script src="script1.js"><{{!}}/script>
<script src="script2.js"><{{!}}/script>

全てのコメント17件

それらを動的に追加する必要があります。つまり、 https://gist.github.com/jeremiahlee/1748966

まあ。 それはかなり醜いですが、それが唯一の方法である場合は、それを使用します=(もっと賢いものがあるはずです。 @ wycatsにもっと賢いものがあると教えてください!ありがとう@jorde :)

私はここでは初めてですが、テンプレートを事前にコンパイルすることで問題を解決できると思います。

何が問題になっているのかはわかりませんが、エスケープする側では、これはすべて、テンプレートがどのように定義されているかに依存すると思います。

innerHTMLを介して挿入されたscript要素は、ブラウザによって動作が異なり、一部のブラウザ、特に古いバージョンのIEではコンテンツがサイレントにドロップされるため、動的なアプローチをお勧めします。 Zeptoはこれを回避しようとします: https ://github.com/madrobby/zepto/blob/master/src/zepto.js#L759 -L763しかし、このようなことをしようとするときは、それでも慎重に踏みます。

@kpdecker問題は非常に単純です。 テンプレートの定義に<script type="text/x-handlebars">...</script>を使用します。 コンテンツに<script src="https://gist.github.com/4332573.js"/></script>を追加すると、テンプレートの終わりが要点の終わりにあると想定されるため、ハンドルバーが混乱します...実際の終わりではありません。

それが唯一のオプションである場合、私はコンパイルオプションを試してみますが、それは少しやり過ぎのようです:/

事前コンパイルは、パフォーマンス上の利点を提供できるため(ビルドステップが必要になる代わりに)、一般的に推奨されます。 これは完全なハックですが、次のようなことができる可能性があります。

</sc{{undefined}}ipt>

ここでHTMLパーサーの動作を回避しますが、それは完全なハックのように感じます。

ハンドルバーの言語側では、コンテンツを一般的にエスケープする方法を確認する必要があります。

それで、私は最終的にテンプレートのコンパイルに行きました...しかし、 <script>要素が含まれていても、それらは「実行」されていないように見えますが、それでもまだ良くありません:/
何か案が?

スクリプト要素が最終レンダリングでDOMにあるが実行されていない場合は、ハンドルバーの範囲外である手動ロードを実行する必要がある場合があります。 これは、このテーマに関する私の経験からの「ここにドラゴンがいる」です(これは何年も前に認められました)

私はこれはそのような種類のヘルパーによって解決できるかもしれませんが:http: //codepen.io/emirotin/pen/rksCx
しかし、何らかの理由で要点はレンダリングされません

これをもう一度考えてみると、これは比較的まれなユースケースだと思います。 このための追加の言語構成を作成するのではなく、FAQセクションにドキュメントを追加して、インラインテンプレートで使用するときにコメントを使用してこの構成を分割する機能を強調し、可能な場合はプリコンパイルされたテンプレートを使用するようにユーザーに促しました。

https://github.com/wycats/handlebars.js/blob/master/FAQ.md

このようなスクリプトをエスケープすることはできませんか? おそらくあまり安全ではありませんが...

<script src="script1.js"><{{!}}/script>
<script src="script2.js"><{{!}}/script>

santafeboundあなたは天才です!

@ letsrock85テンプレートをプリコンパイルすることをお勧めしますか? このような問題を回避し、パフォーマンスを向上させることができます。

@nknapp明確にするために、テンプレートをプリコンパイルしてもこれは修正されません。 スクリプトタグDOMに埋め込まれていますが、実行されません

@nevercast Handlebarsは、スクリプトを含む文字列を計算するだけです。

文字列をどうするかはあなた次第です。 DOMに挿入できますが、スクリプトは実行されません。 それは正しいです。

ソリューションについては、 https://stackoverflow.com/questions/4619668/executing-script-inside-div-retrieved-by-ajaxを参照してください

@nknappのおかげで、私は自分のスクリプトタイプを定義することになりました。 <script type="text/x-after-hashchange">と、ハンドルバーが機能した後にそれらを呼び出します。 これは、リンクしたソリューションに似ていると思います。

このページは役に立ちましたか?
0 / 5 - 0 評価