HOME > リファレンス > jQuery > Templates API > .tmplItem()

.tmplItem()

テンプレートをレンダリングして、ドキュメントに挿入したDOMエレメントの情報を取得します？

返ってくるオブジェクトは下記のプロパティを持ってる。

data: テンプレートレンダリング時に使用したデータ
nodes: ノード
parent: テンプレートがネストされてた場合、親テンプレートが設定される。
tmpl: テンプレートとして利用した
レンダリング時にバインドしたデータ

サンプル

実行結果

値段:

Javascript

$('#template-1').tmpl([
{ no: 1, name: 'ロケット', price: 100},
{ no: 2, name: 'ランチャー', price: 200},
{ no: 3, name: 'ドリル', price: 300},
{ no: 4, name: 'レーダー', price: 400}
], {
tax: function(price){
return price * 1.05
}
})
.appendTo('.switches');
$('.switches :radio').on('click', function(e){
var item = $(e.target).tmplItem();
$('.jqTest1 p span').text(item.tax(item.data.price));
$(item.nodes).css({
display: 'inline-block',
padding: 10,
fontWeight: 'bold'
});
});

HTML

<div class="jqTest1">
<script id="template-1" type="text/x-jquery-tmpl">
<label><input type="radio" name="switch" value="${no}" />${name}</label><br />
</script>
<div class="switches">
</div>
<p>値段:<span></span></p>
</div>

参照ページ

BorisMoore/jquery-tmpl · GitHub