jQuery Templates plugin(jquery-tmpl)で{{if}}を使ってみた

jQueryのテンプレートプラグイン「jQuery Templates Plugin (jquery-tmpl)」で{{if}}を使ってみました。

書式

{{if fieldNameOrExpression}} content {{/if}}

'fieldNameOrExpression'は、データアイテムの名前、Javascriptの関数や式を評価します。

値があれば、タグの中身を表示する

//json
{[
    {title:'Title1', description:'Description'},
    {title:'Title2'}
]}

//tmpl
<p>{{if description}} ${title} {{/if}}</p>

//result
<p>Title1</p>

値の内容が1件以上であれば、タグの中身を表示する

lengthは、tmplデータアイテム名+'.length'で求められ1つ以上でTRUEになります。

//json
{[
    {title:'Title1', options:['opt1','opt2']},
    {title:'Title2', options:[]}
]}

//tmpl
<p> ${title}{{if options.length}} has options{{/if}}</p>

//result
<p>Title1 has options</p>
<p>Title2</p>

比較演算子で評価

通常のjavascriptでのif式のように評価します。
通常と違い、tmplデータアイテム名はコーテーションで囲まず（上記例と同様）に使用するようです。

//json
{[
    {title:'Title1', type:'hidden'},
    {title:'Title2', type:'show'}
]}

//tmpl
<p>{{if type == 'show'}}${title}{{/if}}</p>

//result
<p>Title1</p>

jQuery Templates plugin(jquery-tmpl)を使ってみる

jQuery1.5でコア組み込まれるかと思っていた、テンプレートエンジン「jQuery Templates Plugin」を使ってみました。（組み込まれていると思って書いて、"has no method 'tmpl'"ってエラーがでてやっと気がついた）


使用するには、プラグインファイルを読み込みます。
jquery v1.4.2以上が必要です。

ファイルの読み込み

Microsoft CDNから読み込んでみる場合

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">

参考サイト

• github - jQuery Templates plugin v1.0.0pre.
• jQuery APIドキュメント the jQuery Templates plugin (jquery-tmpl)
• idocsq.net [jQuery] jQueryの公式プラグイン - テンプレート(Template)

使用メモ

繰り返しタグ{{each}}{{/each}}の2重構造でも動いた

{{each 配列名}}でjsonデータに同名の配列があり、lengthが2以上だったら、自動的にループするのですが、配列の中に配列がある構造でも問題なく動作（ループ）しました。すばらしい。

//tmpl
{{each categories}}
<h2>${categoryName}</h2>
 <ul>
  {{each lists}}
   <li><a href="#${url}">${name}</a></li>
  {{/each}} 
 </ul>
{{/each}}

//json
 {
 "categories" : [
  { "categoryName" : "category1", "lists" : [
   { "name" : "sample1", "url" : "http://url1.sample/"},
   { "name" : "sample2", "url"  : "http://url2.sample/"}
  ]},
  { "categoryName" : "category2", "lists" : [
   { "name" : "sample3", "url" : "http://url3.sample/"},
   { "name" : "sample4", "url" : "http://url4.sample/"}
  ]}
 ]
}