<script type =“ text / template”>…</ script>の説明


456

今まで見たことのないものに出会っただけです。Backbone.jsのサンプルTODOアプリケーションのソース(Backbone TODO Example)では、テンプレートが内にあり<script type = "text/template"></script>、PHPの外見のように見えるコードが含まれていますが、JavaScriptタグが含まれています。

誰かがこれを私に説明できますか?これは合法ですか?


素晴らしい質問と答え。新しいYUI App Frameworkコードでこのトリックに出くわしました:new.yuilibrary.com/yui/docs/app/app-todo.html
mjhm

4
W3C docでtype="text/tcl"を見ましたか?それの使い方?(別の質問をする必要がありますか?)
L01man

3
@ L01manはい、別の質問をする必要があります。
ネイトグレン

回答:


414

これらのスクリプトタグは、(PHPのような)テンプレート機能を実装する一般的な方法ですが、クライアント側にあります。

タイプを「text / template」に設定すると、ブラウザが理解できるスクリプトではないため、ブラウザは単にそれを無視します。これにより、そこに何でも入れることができ、後で抽出して、テンプレートライブラリでHTMLスニペットを生成するために使用できます。

:そこにかなりの数のそこにいる-バックボーンは、特定のテンプレートライブラリを使用するためにあなたを強制しない口ひげHAMLエコGoogleの閉鎖テンプレートなどは、(あなたがにリンクされている例で使用したものがあるunderscore.js)。これらは独自の構文を使用して、スクリプトタグ内に記述します。


22
@マット、まさにそれ。同時に、を使用してテキスト全体を再度取得するのは簡単な.innerHTMLので、現在、テンプレートエンジンでは一般的です。
David Tang

1
まあそれは単なる素晴らしいニュースではありません!私はこのような解決策を探していました。あなたの応答とフォローアップをありがとう!
マット

7
こんにちは、別のマット。<script type = "text / template">はhtml検証テストに合格しますか?
マット

17
<template />タグ付けを楽しみにしています。html5rocks.com/en/tutorials/webcomponents/templatecaniuse.com/#search=template
フォルカー・E.

5
未来からこんにちは。<template>はここにありますが、サイトはreddit.comなどのこの手法をまだ使用しています。:F
ビクターザマニアン2017年

114

それは合法でとても便利です!

これを試して:

<script id="hello" type="text/template">
  Hello world
</script>
<script>
  alert($('#hello').html());
</script>

いくつかのJavascriptテンプレートライブラリがこの手法を使用しています。Handlebars.jsは良い例です。


5
このアラートを未加工のJavaScriptとjqueryでどのように実行しますか?
振戦

3
@tremorあなたはjqueryなしの生のJavaScriptで意味ですか?次のようなもの:var el = document.getElementById( 'hello'); var html = el.textContent; alert(html); (IEでスクリプトタグのテキストをさらに詳しく調べる必要があります)
SgtPooki

@SgtPooki ya私はなしで意味しました、答えてくれてありがとう。私が本当にやりたいのは、そのスクリプトを外部ファイルにsrcしてそれを取得することですが、それは実際には不可能であることがわかったので、今、AJAXとsocket.ioに飛び込んでいます。
振戦

@tremor、私があなたがやろうとしていることを正確に理解していないかもしれませんが、外部ファイルを動的に取得して、テンプレートとして実行または解析することは確実に可能です。requirejsを確認してください。
SgtPooki 2013年

@tremor外部ファイルを動的にプルしたい場合は、スクリプトタグではなくXHRを使用します。XHRはプレーンなHTML応答でも動作します...そのことについては何でも。
Jeroen Landheer 2015

26

type以外のスクリプトタグを設定text/javascriptすると、ブラウザはスクリプトタグの内部コードを実行しません。これはマイクロテンプレートと呼ばれます。この概念は、単一ページアプリケーション(別名SPA)で広く使用されています。

<script type="text/template">I am a Micro template. 
  I am going to make your web page faster.</script>

マイクロテンプレートの場合、スクリプトタグのタイプはtext/templateです。Jqueryの作成者であるJohn Resig http://ejohn.org/blog/javascript-micro-templating/によって非常によく説明されています


あなたが含めた素晴らしいリソース。そのリンクは私に多くのことを教えてくれました。
rocktheartsm4l 2015

13

Box9の回答に追加するには:

Backbone.jsは、それ自体がJohn Resigの元のマイクロテンプレートを実装するunderscore.jsに依存しています。

RailsでBackbone.jsを使用する場合は、必ずJammit gemをチェックしてください。テンプレートのアセットパッケージを管理する非常にクリーンな方法を提供します。 http://documentcloud.github.com/jammit/#jst

デフォルトでは、JammitはJResigのマイクロテンプレートも使用しますが、テンプレートエンジンを置き換えることもできます。


さらに、Jammitを提供するDocumentCloudは、BackboneとUnderscoreを開発したのと同じ会社です。
Ceasar Bautista 2017

12

これは、テキストをレンダリングまたは正規化せずにHTMLに追加する方法です。

次のように追加するのと同じです。

 <textarea style="display:none"><span>{{name}}</span></textarea>

32
それは異なり、textareaはこれらの要素をDOMに挿入し、要求されたすべての外部アセット(画像など)をフェッチします。スクリプトタグはしません。
LocalPCGuy 2013年

13
@LocalPCGuyは真実ではありません。textarea <img src="image.jpg">内を含めても、ブラウザはfetchを実行しません。ブラウザは、textarea 内image.jpgのコンテンツがレンダリングされるものではないことを認識しています。
vikki 14

5
@vikkiおっと、正解です。textareaは、スクリプトタグテンプレートの実行可能な置き換えとなる数少ない要素の1つかもしれません。
LocalPCGuy 2014

4
@LocalPCGuyええ、私はこれらの2つは互換的に使用できると思います。テンプレートに行がある</script>場合、スクリプトタグ内では使用できないため、textareaを使用でき、その逆も可能です。
vikki

2
うん...テンプレートタグの前とスクリプトのtype = text / templateの前は、すべてtextareaで行ったと思います。Ajaxがなかったときのiframeの場合も同じです。
dkellner 2017年

11

<script type = “text/template”> … </script>廃止されました。<template>代わりにタグを使用してください。


9
<template>タグはIE 11の時点でInternet Explorerでまだサポートされていません
ovinophile

87
5年後には、<template>タグを使用します。
超照明2014

13
<script type =“ text / template”>は何でも保持でき、解析されません。一方、<template>タグはDOMに解析されるため、有効なHTMLである必要があります。通常、これは最初のテンプレートがそのままのテンプレートとして保持され、2番目のテンプレートがHTMLに準拠していない部分を削除してテンプレートを壊すことを意味します。...もちろん、口ひげなどのテンプレートエンジンを使用する場合にのみ問題になります。
dagnelies 14

10
<template>タグを使用しないでください。また、「時代遅れ」であることに基づいて判断を下さないでください。これはミラノファッションウィークではありません。機能していて技術的に適切であれば、使用できます:)今のところ実際:<template>タグはIEおよびOpera Mini(CanIUseによる)ではまだサポートされておらず、<script>タグは空白やコメントを失う可能性のある非表示のdivやその他のタグとは対照的に、指定した内容を正確に保持します。
dkellner 2015年

3
回答が投稿されてから2年後、IE11自体は時代遅れのテクノロジであり、Microsoftは代わりにEdgeに移行しました<template>。ほとんどの主要なデスクトップブラウザがこの<template>タグをサポートしています。今から使うことを強くお勧めします。developer.mozilla.org/en/docs/Web/HTML/Element/...

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