[JavaScriptテンプレートエンジン-テンプレート] (Wings-Winds)

テンプレート

HTML/XHTML/XML、またはプレーンテキストファイル

テンプレートファイルはドキュメント内に書くのではなく、別のファイルとして用意します。
そのため、表示内様に変更があったり、複数のテンプレートを使うときにテンプレートの記述位置をさがす必要もありませんし、テンプレート以外の部分を間違えて変更するなどのミスも防げます。

テンプレートには {tpl: から始まり } で終わる部分にJavaScriptオブジェクト(JSON)のプロパティが適用されます。
: で始まるいくつかのキーワードがスクリプト内で使用されます。

---- サンプル .1 ----

名前は{tpl:name}です。
{tpl::repeat} {tpl::endrepeat}
{tpl::if=id==2}IDは２です {tpl::endif}

変数表示

{tpl:var}

オブジェクトのプロパティーを代入します。
Templateで使用するキーワードと区別するため、区切り文字の : は 1つです。

---- サンプル .1 ----

template

<p>{tpl:item}</p>

script

data={item:'今日の天気は晴れ'};
html=Template.GetHTML(id, data);

出力

<p>今日の天気は晴れ</p>

繰り返し _{repeat endrepeat}

{tpl::repeat= expr }
{tpl::endrepeat}

JavaScriptオブジェクトの階層下の配列を、その配列の個数文だけ繰り返します。
exprはオブジェクトの階層をディレクトリと見たてた / 区切りです。

---- サンプル .1 ----

template.tpl

{tpl::repeat=/students}
<tr><td>{tpl:sid}</td><td>{tpl:name}</td></tr>
{tpl::endrepeat} {tpl::repeatend}

script

data={students:[
  {sid:1, name:'Joe'}
 ,{sid:2, name:'Peat'}
]};
html=Template.GetHTML(id, data);

出力

<tr><td>1</td><td>Joe</td></tr>
<tr><td>2</td><td>Peat</td></tr>

---- サンプル .2 ----

repeatがネストしている場合は、exprは上位repeatで指定されたプロパティがrepeatのルートディレクトリに使われます。

template.tpl

{tpl::repeat=/classes}
<tbody>
{tpl::repeat=/students}
<tr><td>{tpl:sid}</td><td>{tpl:name}</th></tr>
{tpl::endrepeat}
</tbody>
{tpl::endrepeat}

script

data={
  classes:[
     {students:[
       {sid:11, name:'Joe'}
      ,{sid:12, name:'Peat'}
     ]}
    ,{students:[
      {sid:21, name:'Mina'}
     ,{sid:22, name:'Cindy'}
     ]}
  ]};

出力


<tbody>
<tr><td>11</td><td>Joe</td></tr>
<tr><td>12</td><td>Peat</td></tr>
</tbody>
<tbody>
<tr><td>21</td><td>Mina</td></tr>
<tr><td>22</td><td>Cindy</td></tr>
</tbody>

奇数／偶数 _evenodd

{tpl::evenodd = num }

numは数値を指定可能。
repeatの内部で使用すると、"odd"と"even"が交互に出力されます。
numが２の場合は"even"と"odd"を出力します。
3以上の場合に "odd"の後ろに1からの連番が付きます。

2が指定、または省略した場合は odd、even
3が指定された場合はodd1、odd2、even
4が指定された場合はodd1、odd2、odd3、even
という繰り返しになります。

repeatの外で指定すると、常にoddとなります。

---- サンプル .1----

evenodd の引数なし

{tpl::repeat=students}
<tr class="{tpl::evenodd}"><td>{tpl:id}</td><td>{tpl:name}</td></tr>
{tpl::endrepeat}

出力

<tr class="odd"><td>id1</td><td>name1</td></tr>
<tr class="even"><td>id2</td><td>name2</td></tr>
<tr class="odd"><td>id3</td><td>name3</td></tr>
<tr class="even"><td>id4</td><td>name4</td></tr>

---- サンプル .2----

evenodd の引数に3を指定

{tpl::repeat=students}
<tr class="{tpl::evenodd=3}"><td>{tpl:id}</td><td>{tpl:name}</td></tr>
{tpl::endrepeat}

出力

<tr class="odd1"><td>id1</td><td>name1</td></tr>
<tr class="odd2"><td>id2</td><td>name2</td></tr>
<tr class="even"><td>id3</td><td>name3</td></tr>
<tr class="odd1"><td>id4</td><td>name4</td></tr>

条件分岐 _{if elif else endif}

{tpl::if = expr>
{tpl::elif = expr>
{tpl::else>
{tpl::endif>

{tpl::if=left==right} の形式、または {tpl::if=expr}の形式で記述

左辺、右辺がある時の比較式は == または !=
単項式の場合は booleanとして判断します。
計算に使用出来る演算子は + - * / % ( )
% は割算の”あまり”です。
0除算は0となります。

全て数値計算ですが、それぞれの式の中に数字以外の文字があると、
オブジェクトのプロパティーと見なし、その値を代入します。
オブジェクトのプロパティーにその値がなければ0とみなします。
/ を区切りとしてオブジェクトのプロパティーツリーを追うことが出来ますが、割り算と区別するためにクォートして下さい。

---- サンプル .1----

{tpl::repeat=/students}
<tr>
    <td>{tpl::if="birth/month"==4}誕生月{tpl::else}&nbsp;{tpl::endif}</td>
    <td>{tpl:id}</td><td>{tpl:name}</td></tr>
{tpl::endrepeat}

script

data={students:[
         {sid:1, name:'Joe', birth: {month:'3', day: '12}, sex: 1}
        ,{sid:2, name:'Peat', birth: {month:'4', day: '21}, sex: 1}
        ,{sid:3, name:'Mina', birth: {month:'6', day: '21}, sex: 2}
        ,{sid:4, name:'Cindy', birth: {month:'12', day: '2}, sex: 2}
    ]};
html=Template.GetHTML(id, data);

出力

<tr><td>&nbsp;</td><td>1</td><td>name1</td></tr>
<tr><td>誕生月</td><td>2</td><td>name2</td></tr>
<tr><td>&nbsp;</td><td>3</td><td>name3</td></tr>
<tr><td>&nbsp;</td><td>4</td><td>name4</td></tr>

リピートカウンター _repeatcount

{tpl::repeat}の中にある条件分岐の計算式に使用できる繰り返しのカウンターです。
{tpl::repeat}ではテーブルの行を何度も書き出すなど、繰り返しを行いますので、その「何行目」にあたります。

---- サンプル .2----

{tpl::repeat=/students}
<tr>
    <td>{tpl::if=repeatcount==2}２行目{tpl::else}&nbsp;{tpl::endif}</td>
    <td>{tpl:id}</td><td>{tpl:name}</td></tr>
{tpl::endrepeat}

script

data={students:[
         {sid:1, name:'Joe', birth: {month:'3', day: '12}, sex: 1}
        ,{sid:2, name:'Peat', birth: {month:'4', day: '21}, sex: 1}
        ,{sid:3, name:'Mina', birth: {month:'6', day: '21}, sex: 2}
        ,{sid:4, name:'Cindy', birth: {month:'12', day: '2}, sex: 2}
    ]};
出力
<tr><td>&nbsp;</td><td>1</td><td>name1</td></tr>
<tr><td>２行目</td><td>2</td><td>name2</td></tr>
<tr><td>&nbsp;</td><td>3</td><td>name3</td></tr>
<tr><td>&nbsp;</td><td>4</td><td>name4</td></tr>
---- サンプル .2----
<table>
{tpl::repeat=user}
{tpl::if=(repeatcount-1)%3==0}
<tr><th>名前</th><th>住所</th></tr>
{tpl::endif}
<tr class="{tpl::evenodd}">
<td>{tpl:name}</td><td>{tpl:addr}</td>
</tr>
{tpl::endrepeat}
</table>
script
data={user:[
       { name:'神崎',addr:'真栄田町'}
      ,{ name:'土居',addr:'北町'}
      ,{ name:'岸辺',addr:'西町'}
      ,{ name:'岡田',addr:'中倉町'}
      ,{ name:'岡本',addr:'藤が丘町'}
      ,{ name:'長井',addr:'北川町'}
      ,{ name:'松田',addr:'井手町'}
      ,{ name:'前田',addr:'真栄田町'}
  ]};
出力
３行ごとにヘッダが表示されます

<table>
<tr><th>名前</th><th>住所</th></tr>
<tr class="odd"><td>神崎</td><td>真栄田町</td></tr></tr>
<tr class="even"><td>土居</td><td>北町</td></tr></tr>
<tr class="odd"><td>岸辺</td><td>西町</td></tr></tr>
<tr><th>名前</th><th>住所</th></tr>
<tr class="even"><td>岡田</td><td>中倉町</td></tr></tr>
<tr class="odd"><td>岡本</td><td>藤が丘町</td></tr></tr>
<tr class="even"><td>長井</td><td>北川町</td><tr></tr>
<tr><th>名前</th><th>住所</th></tr>
<tr class="odd"><td>松田</td><td>井手町</td></tr></tr>
<tr class="even">&t;td>前田</td><td>真栄田町</td></tr></tr>
</table>

Wings-Winds:Software:Web