web-dev-qa-db-ja.com

<script type = "text / template"> ... </script>の説明

私は今まで見たことがない何かにつまずいた。 Backbone.jsのサンプルTODOアプリケーションのソース（ バックボーンTODOの例 ）では、テンプレートは<script type = "text/template"></script>内にあり、その中には何かのようなコードが含まれています。 PHPがJavaScriptタグ付きです。

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

javascripttemplatestypesbackbone.jsunderscore.js
434
Matt

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

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

バックボーンでは、特定のテンプレートライブラリを強制的に使用することはありません - かなりの数のものがあります。 口ひげ 、 ハムル 、 エコ 、 Googleクロージャテンプレート など（リンク先の例で使用されているものは underscore.js です）。これらはあなたがそれらのスクリプトタグの中に書くためにあなた自身のためのそれら自身の構文を使うでしょう。

397
David Tang

合法的でとても便利です。

これを試して：

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

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

111
Rimian

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

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

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

25
Fizer Khan

Box9の答えに追加するには：

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

Backbone.jsをRailsと一緒に使用する場合は、必ずJammit gemを調べてください。テンプレートの資産パッケージを管理するための非常にきれいな方法を提供します。 http://documentcloud.github.com/jammit/#jst

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

13
Andrew De Andrade

レンダリングや正規化を行わずにHTMLにテキストを追加する方法です。

それを追加することと同じです。

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

<script type = “text/template”> … </script>は時代遅れです。代わりに<template>タグを使用してください。

10
Reza Salarmehr

jQueryテンプレートは、このメソッドを使用して他のHTML内に直接レンダリングされないHTML（これが重要な点）を格納する例です。 http://api.jquery.com/jQuery .template /

3
Niels Heidenreich