データをマークアップにバインドする手段として、jQueryテンプレートプラグインhttp://api.jquery.com/tmpl/について読んでいます。すべての例は、scriptnewscriptタグでテンプレートを定義していることを示しているようです。私は実際には、<head>
これらすべてのスクリプトタグでHTMLを乱雑にしたくないのです。
これを整理するためのより良い方法はありますか?たぶん、動的にロードされるスクリプトでいっぱいのテンプレートフォルダがありますか?
データをマークアップにバインドする手段として、jQueryテンプレートプラグインhttp://api.jquery.com/tmpl/について読んでいます。すべての例は、scriptnewscriptタグでテンプレートを定義していることを示しているようです。私は実際には、<head>
これらすべてのスクリプトタグでHTMLを乱雑にしたくないのです。
これを整理するためのより良い方法はありますか?たぶん、動的にロードされるスクリプトでいっぱいのテンプレートフォルダがありますか?
テンプレートを外部ファイルに保存できます(たとえば、Ajax経由でフェッチするよりも)。
http://api.jquery.com/jQuery.template/からの引用
"...リモートテンプレートの場合、任意のAJAX呼び出しを使用してテンプレートマークアップを文字列として取得するか、文字列を定義するjsファイルを指す静的スクリプトブロックを使用することができます。次に、jQuery.templateを使用する必要があります。文字列からテンプレートをコンパイルし、そこからjQuery.tmplを使用してレンダリングします。 "
あなたはそれをする必要はありません。たとえば、テンプレートを.jsファイル(メッセージカタログのようなもの)に保存できます。
// this is a file full of templates
var SITE_TEMPLATES = {
ERROR_1: 'This is an error template: the error is ${error.msg}',
WHATEVER: 'I cannot make this stuff up but you get the ${idea}'
};
それを引き込むと、次の方法でテンプレートを使用できます
$('#someplace').append($.tmpl(SITE_TEMPLATES.ERROR_1, { error: { msg: "hello world" }}));
つまり、$.tmpl()
最初のパラメーターとしてテンプレート本体を渡すことができ、どこからでも取得できます。
または、長いテンプレートをJavascript文字列定数として記述するのは少し面倒なので<script>
、1つの静的HTMLファイルに多数のテキストタグを積み上げることができます。次に、それをAJAXして、隠し<div>
か何かにドロップすることができます。そうすれば、キャッシュの利点を引き続き得ることができ、テンプレートの保守が容易になる可能性があります。
もちろん、これらの方針に沿って、テンプレートを個別のファイルとして個別に維持し、任意のパッケージ化スキームに従ってサイト構築時にそれらを接着することができます。