テンプレートタグ。バインドされるデータにHTMLがに含まれていた場合エスケープされる。エスケープしない場合、{{html}}を利用する。
サンプル
Javascript
$('#template-1')
.tmpl({ name: '<a href="http://www.caquu.com/">www.caquu.com</a>' })
.appendTo('.jqTest1 .screen');
HTML
<div class="jqTest1">
<script id="template-1" type="text/x-jquery-tmpl">
<dl>
<dt>デフォルト</dt>
<dd>${name}</dd>
</dl>
<dl>
<dt>html</dt>
<dd>{{html name}}</dd>
</dl>
</script>
<div class="screen"></div>
</div>
${field}の代わりに{{= field}}も利用できる。というか${}が{{= field}}のエイリアスっぽい。
${}はPHPのヒアドキュメント内で変数をパースする場合に使うので、そういう場合は{{= field}}使うといいかも。
サンプル
Javascript
$('#template-2')
.tmpl({ name: '<a href="http://www.caquu.com/">www.caquu.com</a>' })
.appendTo('.jqTest2 .screen');
HTML
<div class="jqTest2">
<script id="template-2" type="text/x-jquery-tmpl">
<p>{{= name}}</p>
</script>
<div class="screen"></div>
</div>
渡されたデータのメソッド等も利用できる。
サンプル
Javascript
$('#template-3')
.tmpl([
{ name: 'HOME', info: ['/', 'サイトTOP', 'test']},
{ name: 'jQuery API', info: ['/reference/jquery/api/', 'jQuery APIのリファレンス', 'test', 'test']},
{ name: '開発環境', info: ['/development/', 'Windowで快適な開発環境を求めて', 'test', 'test', 'test']}
])
.appendTo('.jqTest3 .screen');
HTML
<div class="jqTest3">
<script id="template-3" type="text/x-jquery-tmpl">
<p><a href="{{= info[0]}}">{{= name}}</a> - {{= info[1]}} [info.length: {{= info.length}}]</p>
</script>
<div class="screen"></div>
</div>
テンプレートレンダリング時に$itemと$dataがテンプレート変数として利用できる。
$itemはparentとdataというプロパティを持っていて、dataは現在参照しているデータ。
{{= name}}と{{= $item.data.name}}は等価。
parentはよくわかんね。$dataは第二引数で渡したオブジェクトがバインドされている。
サンプル
Javascript
$('#template-4')
.tmpl([
{ name: 'HOME', info: ['/', 'サイトTOP']},
{ name: 'jQuery API', info: ['/reference/jquery/api/', 'jQuery APIのリファレンス']},
{ name: '開発環境', info: ['/development/', 'Windowで快適な開発環境を求めて']}
], {
join: function(str){
return 'http://www.kantenna.com' + str;
}
})
.appendTo('.jqTest4 .screen');
HTML
<div class="jqTest4">
<script id="template-4" type="text/x-jquery-tmpl">
<dl>
<dt><a href="{{= $item.data.info[0]}}">{{= $data.name}}</a></dt>
<dd class="url">{{= $item.join($item.data.info[0])}}</dd>
<dd>{{= $item.data.info[1]}}</dd>
</dl>
</script>
<div class="screen"></div>
</div>