7

バックグラウンド

すべてのJSテンプレートエンジンは、次のようにテンプレートテキストをスクリプトブロック内に配置することを推奨しています。

<script id="peopleTemplate" type="text/template">
   {#people}
   <div class="person">Name: {firstName} {lastName}</div>
   {/people}
</script>

しかし、多くの開発者は（当然のことながら）これを嫌います。スクリプトブロック内のコードエディターでHTML構文の強調表示が失われるためです。私はこのような回避策を見てきました：<script> "text/html"テンプレートで正しいHTML構文の強調表示を維持します 。この質問は回避策について尋ねているのではありません。

1つの危険は、Webブラウザが無効なHTMLを修正しようとするため、$（'＃peopleTemplate'）。html（）を呼び出すと予測できない結果になることです。しかし、頭から離れて、これを説明するための例を考えることはできません。

質問

スクリプトタグをdivに置き換えることのその他の危険性にはどのようなものがありますか？

ボーナス：誰かがブラウザのHTML自動修正を説明する良いフィドルを思い付くことができますか？

4

2 に答える 2

8

ブラウザの自動修正の問題の例を次に示します。http：//jsfiddle.net/KPasF/

テンプレートは次のとおりです。

<table>
    <tr>
        {{#numbers}} <th> {{.}} </th> {{/numbers}}
    </tr>
</table>

データは次のとおりです。

var json = { "numbers": [ 1, 2, 3 ] };

テンプレートが非表示のdivにあり、スクリプトブロックにある場合のさまざまな結果については、フィドルhttp://jsfiddle.net/KPasF/を参照してください。

説明

これを非表示にすると、ブラウザはタグ（および口ひげタグ）の<div>外側のコンテンツを削除します。これは、jsonオブジェクトにバインドし、次のようにレンダリングする、を残すだけです。<th>{{#numbers}}{{#numbers}}{{.}}[object Object]

テンプレートを<script type='text/html'>ブロックに入れると、期待どおりに機能し、3つ<th>の

<div>：の代わりにブラウザがテンプレートをマングルする方法の例<script>：

ここに画像の説明を入力してください

于 2013-03-15T12:21:36.173 に答える
1

別の例として、次のインラインテンプレート（divでラップされている）がある場合：

<div id="template">
   {#Users}
       <a href="/ViewUser?ID={UserID}">{UserName}</a>
   {/Users}
</div>

次に、jQuery.html（）を使用してテンプレートテキストを取得すると、ブラウザによって異なる結果が得られます。Firefoxは、href内の角かっこをエスケープするため、最も混乱しています。

Chrome 26.0.1410.64：

{#Users}
     <a href="/ViewUser?ID={UserID}">{UserName}</a>
{/Users}

Firefox 10.0.1：

{#Users} 
    <a href="/ViewUser?ID=%7BUserID%7D">{UserName}</a> 
{/Users}

IE 8.0.7601.17514：

{#Users} 
    <A href="/ViewUser?ID={UserID}">{UserName}</A> 
{/Users}
于 2013-04-17T13:05:04.770 に答える