フレームワーク機能 テンプレートエンジン

Next JSのHTMLは、すべてテンプレートエンジンを介して出力されるため、HTMLがテンプレートであると言えます。ここでは、テンプレートエンジンの機能を学びます。

デリミタ

デリミタとは、テンプレートの処理を記述する際に用いる、開始と終了の特別な文字列を指します。初期状態では、次のように設定されています。

開始デリミタ

<!--{

終了デリミタ

}-->

テンプレートへのデータ設定

ユーザーがリクエストして、アクションが実行された後にテンプレート処理が実行され、最終的にHTMLが出力されます。 テンプレートへ出力するデータは、アクションで設定します。 アクション内で、 this.set('key', 'value') で設定します。 this.setで値を設定するときに使用したkeyをそのままデリミタで囲い埋め込むことができます。

アクション

this.set('key', 'value');

テンプレート

<!--{key}-->

出力結果

value

リテラル

デリミタを含むような部分に対して、リテラルとして囲うことでテンプレート処理を無視させることができます。 Version 0.8.1でデリミタを含み囲うと、出力されない部分が存在するバグがあります。

繰り返し処理

繰り返しには、foreachを利用します。

アクション

this.set('data', {
    fruit: [{
        name: 'melon',
        price: 2500
    },{
        name: 'orange',
        price: 100
    }]
});

テンプレート

<dl>
    <!--{foreach from=data.fruit item=item key=key}-->
    <dt><!--{item.name}--></dt>
    <dd>Price: <!--{item.price}--></dd>
    <!--{/foreach}-->
</dl>

出力結果

<dl>
    <dt>melon</dt>
    <dd>Price: 2500</dd>
    <dt>orange</dt>
    <dd>Price: 100</dd>
</dl>

data.fruit内に格納された配列を繰り返しています。 foreachには、繰り返したいオブジェクトをfromで設定します。 繰り返し時に、イテレートされるオブジェクトを参照する変数名をitemに、キーをkeyに設定します。

繰り返しデータが無い場合の処理

条件により、繰り返すデータが存在場合があります。 その場合に出力するエリアを、foreachelseで設定することができます。

テンプレート

<dl>
    <!--{foreach from=data.nodata item=item key=key}-->
    <dt><!--{item.name}--></dt>
    <dd>Price: <!--{item.price}--></dd>
    <!--{foreachelse}-->
    <dd>No items.</dd>
    <!--{/foreach}-->
</dl>

出力結果

<dl>
    <dd>No items.</dd>
</dl>

条件分岐

条件分岐には、ifを利用します。

アクション

this.set('data', {
    string: 'string',
    number: 3000,
    bool: true
});

テンプレート

<dl>
    <!--{if data.string === 'string'}-->
    <dd>data.string is "string".</dd>
    <!--{/if}-->
    <!--{if data.number == '3000'}-->
    <dd>data.number is 3000.</dd>
    <!--{/if}-->
    <!--{if data.number != '2000'}-->
    <dd>data.number is not 2000.</dd>
    <!--{/if}-->
    <!--{if data.number > 1000}-->
    <dd>data.number is over 1000.</dd>
    <!--{/if}-->
    <!--{if data.number >= 3000}-->
    <dd>data.number is below 3000.</dd>
    <!--{/if}-->
    <!--{if data.number <= 3000}-->
    <dd>data.number is more 3000.</dd>
    <!--{/if}-->
    <!--{if data.number < 5000}-->
    <dd>data.number is under 5000.</dd>
    <!--{/if}-->
    <!--{if data.string === 'string' and data.bool === true}-->
    <dd>data.string is "string" and data.bool is true.</dd>
    <!--{/if}-->
</dl>

複数条件、条件外

複数条件を指定するためには、elseifを、条件外に関してはelse利用します。

テンプレート

<dl>
    <!--{if data.number == 3001}-->
    <dd>data.number is 3001</dd>
    <!--{elseif data.number == 3000}-->
    <dd>data.number is 3000</dd>
    <!--{/if}-->

    <!--{if data.number == 3001}-->
    <dd>data.number is 3001</dd>
    <!--{elseif data.number == 3002}-->
    <dd>data.number is 3000</dd>
    <!--{else}-->
        <!--{if data.number == 3001}-->
        <dd>data.number is 3001</dd>
        <!--{elseif data.number == 3000}-->
        <dd>data.number is 3000</dd>
        <!--{/if}-->
    <!--{/if}-->
</dl>

出力結果

data.number is 3000

data.number is 3000

外部テンプレートの読み込み

テンプレート内から、別なテンプレートを読み込むには、includeを利用します。

テンプレート

<!--{include file='foo.html' outvar='Next JS'}-->
templates/foo.html
<p>This area is <em>"templates/foo.html"<em>.
<p>outvar : <!--{outvar}--></p>

includeでファイルを読み込むときに、fileに対して、読み込むファイルを設定します。 インクルードするファイルは、publicと同位のtemplatesディレクトリから読み込みます。

装飾子

変数の値を直接出力するだけではなく、何かしらのフィルターをかけて出力することができます。 修飾子と呼びますが、|(パイプ)の後ろに利用する修飾子を指定します。NX.util.Formatクラスメソッドを直接利用できます。

(メモ)ユーザー作成のメソッドも呼び出せますが、動作確認中です。

テンプレート

<dl>
    <!--{foreach from=data.fruit item=item key=key}-->
    <dt><!--{item.name}--></dt>
    <dd>Price: <!--{item.price|jpMoney}--></dd>
    <!--{/foreach}-->
    <dd>number: <!--{data.number|numberFormat}--></dd>
    <dd>string: <!--{data.string|capitalize}--></dd>
    <dd>text: <!--{data.text|nl2br}--></dd>
    <dd>html: <!--{data.html|htmlEncode}--></dd>
    <dd>replace: <!--{data.string|replace:"str":"enjoy"}--></dd>
</dl>