2011年3月3日木曜日

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>