1

チームの複雑な設計プロセスを簡素化しようとしています。簡単に言うと、サーバーは非表示のテンプレートセクションをシングルページアプリに挿入するため、Backbone.jsアプリでJSTテンプレートの代わりにDOMノードを使用できます。jqueryの.clone（）メソッドが特定の属性を好まないことを発見しました。

私が使用するとき$('.mainBillboard').clone()、これは：

<div style="background-image: url({{ banner_url }})" id="mainBillboard">

...これに複製されます：

<div id="mainBillboard" style="">

src='{{ image_url }}'画像タグの属性についても同様の動作が見られます。

'style'から'e'を省略した場合、jqueryはDOM要素をそのまま複製することに注意してください。私は現在のニーズに対してこれを回避する方法を見つけましたが、jqueryがこれらの属性を完全に具体的にカリングする理由に興味があります。これはある種の攻撃保護（アンチXSSなど）ですか？

4

1 に答える 1

3

テストにFirefoxを使用していると思います。私がこれを使うとき：

<div id="outerContainer">
    <div style="background-image: url({{ banner_url }})" id="mainBillboard">asdfasdf</div>
</div>

この：

console.log($('#outerContainer').html());
console.log($('#outerContainer').clone().html());

デモ： http： //jsfiddle.net/ambiguous/YEPjL/

styleSafariまたはChromeでは、両方で同じ出力が得られますが、Firefoxを使用すると、2番目の属性は空になります。ただし、HTMLが次のようになっている場合：

<div id="outerContainer">
    <div style="background-image: url(does-not-exist)" id="mainBillboard">asdfasdf</div>
</div>

その後、どこでも同じ出力が得られます。

デモ： http： //jsfiddle.net/ambiguous/XukCa/

問題は、それ{{ banner_url }}が有効なURLではないため、FirefoxがHTMLを解析しようとしているときに、明らかにURLを削除していることです。HTMLが非表示の中にある場合<div>でも、ブラウザは、表示されているHTMLの場合と同じように、解析と検証を行う必要があります。

HTMLにテンプレートを埋め込むための通常のアプローチは、<script>要素を使用して、ブラウザーがテンプレートを解釈しようとしないようにすることです。この構造に切り替えることをお勧めします。

<script type="text/html" id="tmpl-mainBillboard">
    <div style="background-image: url({{ banner_url }})" id="mainBillboard">asdfasdf</div>
</script>
<script type="text/html" id="tmpl-somethingElse">
    <!-- another template... -->
</script>

したがって、テンプレートごとに1つ<script type="text/html">（または必要に応じて）、コンテンツを取得して、その出力をテンプレートエンジンに渡して解析することができます。<script type="text/template">$('#tmpl-mainBillboard').html()

デモ： http： //jsfiddle.net/ambiguous/cZzW9/

この最後のデモでは、<script>Firefox、Chrome、Safariのチャンクに対して同じ出力が生成されます。

于 2012-04-14T19:23:03.857 に答える