HOME > リファレンス > jQuery > Templates API > .tmpl( [data] [, options] )

.tmpl( [data] [, options] )

引数

(Array|Object)data

(object)options: バインドするデータ。ここで設定したデータは.tmplItem()で利用できる。

戻り値

jQuery: jQueryオブジェクト

jQueryオブジェクトが持つ最初のDOM要素のテキストをdataで置き換える。sprintfみたいな感じ。

dataが配列だった場合、配列の数だけループされる。また戻り値はjQueryオブジェクトなのでjQueryオブジェクトのメソッドが利用できる。

.appendTo()、.prependTo()、.insertAfter()、.insertBefore()とか使うと簡単にHTMLに埋め込むことができるんで便利。

サンプル

実行結果

${title}

${desc}

アストロスイッチ

Javascript

$('#template-1').tmpl([
{ no: 1, name: 'ロケット'},
{ no: 2, name: 'ランチャー'},
{ no: 3, name: 'ドリル'},
{ no: 4, name: 'レーダー'}
]).appendTo('.switches ul');
$('#template-2').tmpl({ title: 'フォーゼ', desc: 'やっぱり園田先生はゾディアーツだったか・・・'}).appendTo('.fourze');

HTML

<div class="jqTest1">
<script id="template-1" type="text/x-jquery-tmpl">
<li>[no.${no}] ${name}</li>
</script>
<div id="template-2">
<h5>${title}</h5>
<p>${desc}</p>
</div>
<div class="switches">
<h5>アストロスイッチ</h5>
<ul>
</ul>
</div>
<div class="fourze">
</div>
</div>

参照ページ

BorisMoore/jquery-tmpl · GitHub