35

のようなものです...

<script type="text/html" id="this-content1">
<h1>This Header Info One</h1>
<p>This content one. . .</p>
</script>
<script type="text/html" id="this-content2">
<h1>This Header Info Two</h1>
<p>This content two. . .</p>
</script>

...そしてjQueryを使用して、今日の標準のセレクターのグッドプラクティスに基づいてコンテンツを交換しますか？

スクリプトtype="text / html" ...を使用してコンテンツを動的に変更できるようになり、これを行うためのさまざまな方法を見つけています。これが進む方向と、この慣行の標準化を説明する可能性のある情報源はありますか。

次のようなコードが表示されます...

<div class="thumbnail">
            <# if ( data.uploading ) { #>
                <div class="media-progress-bar"><div></div></div>
            <# } else if ( 'image' === data.type ) { #>
                <img src="{{ data.size.url }}" draggable="false" />
            <# } else { #>
                <img src="{{ data.icon }}" class="icon" draggable="false" />
            <# } #>
        </div>

...スクリプトtype="text / html"タグにネストされており、なぜこのように記述されているのかまったくわかりません。また、バックボーンでくちばしを濡らしたところです。1ページにコンテンツスワッピングを追加しようとすると、これは少し重いように見えます。

4

3 に答える 3

24

スクリプトタグのHTML5仕様によると、任意の有効なMIMEタイプに設定され<script>た属性で使用することはまったく問題ありません。これには、またはtypeのようなMIMEタイプが含まれます。text/htmltext/plain

スクリプトタグのHTML4仕様によると、それはまったく問題ありません。

「作成者がHTMLドキュメントに添付できるスクリプトには2つのタイプがあります。ドキュメントがロードされたときに1回実行されるスクリプトと、特定のイベントが発生するたびに実行されるスクリプトです。」

テンプレート作成にバックボーンは必要ありません。たとえば、jQueryまたは私の個人的なお気に入りであるMustache.jsを使用できます。

于 2012-12-14T21:11:01.600 に答える
3

後で使用するためにHTMLの一部を保存したいとします。スクリプト以外のデータをスクリプトタグに入れるのは意味がありません。Facebookが行うことを実行してください！

<code class="hide" id="code1"><!--
  <p>My HTML here</p>
  <script>My Javascript here</script>
--></code>

次に、後でHTMLを取得して、後でやりたいことを行うことができます。

var html = document.querySelector('#code1').innerText.slice(5, -5)

内部のスクリプトは、適切に処理するまで実行されません。

いくつかのメモ：

  • innerTextと他のテキスト関数の違いが何であるかわかりません
  • スクリプトタグをDOMに挿入するだけではいけないと思います。jQueryがどのようにそれを行うのかわからない
于 2012-12-14T21:14:42.497 に答える
1

これは、サーバー側のレンダリングを使用してデータをHTMLに直接埋め込むことを目的としています。

Mozillaによると-type属性に有効な非JavaScriptMIMEタイプを指定することにより、サーバー側のレンダリングでHTMLにデータを埋め込むためにこの属性を使用することもできます。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

例 ：

<!-- Generated by the server -->
<script id="data" type="application/json">{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}</script>

<!-- Static -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("User information: %o", userInfo);
</script>
于 2020-07-18T20:41:37.050 に答える