JavaScriptTemplates（JST）入門！

<textarea><textarea> <div id="article_body"> <h2>JSTテンプレートでのif構文の使い方</h2> <p>　それではサンプル2を拡張して、10日以内の記事なら「HOT」、20日以内の記事なら「おすすめ」、それ以外なら空白になるようにしてみましょう。サンプルファイルは<a href="http://dl.impressbm.co.jp/content/135" target="_blank">こちら</a>からダウンロードできます（808_3.zip/25.6 KB/GPL）。<br /> <br /> ・HOT：</p><li class="hot">${entry.title}</li><br /> ・おすすめ：<li class="feature">${entry.title}</li><br /> ・それ以外：<li>${entry.title}</li><br /> <br /> 　このように条件に応じてマークアップを変更させるには、if構文を使用することができます。図3-1にif構文と、今回のサンプルのテンプレートを示しました。<br /> <br /> 　まず、条件Aにあたる部分をサンプルで見てみましょう。<br /> <br /> {if getRank(entry.publishedDate) == 'hot'}<br /> <br /> 　記事の作成日時は、entry.publishedDateで取得します。「RSSデータの構造（<a href="http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/reference.html#JSON">http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/reference.html#JSON</a>）」も合わせて参照ください。<br /> <br /> 　getRankは、自作のJavaScriptファイル（sample3.js）内に新しく用意した関数です。10日以内なら「hot」20日以内なら「feature」それ以外なら空の文字列を返します。if構文の中では、関数も呼び出し可能で、今回はgetRank()関数を呼び出し、その戻り値を比較演算子「==」で等しいかどうかを判定しています。「JavaScriptの比較演算子（<a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators">https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators</a>）」も参照ください。 <p class="img"><a href="/images/article/808-301.png" target="_blank"><img src="/images/article/808-301-t.png" /></a></p> <h2>モディファイアの使い方、作り方</h2> <p>　最後にJSTのモディファイアについて紹介します。<br /> <br /> 　最初のサンプル1に対して「capitalize」というモディファイアを適用した例です。<br /> <br /> こんにちは ${name|capitalize} さん!<br /> <br /> 　例えば、名前が「think it」である場合、次のように表示されます。<br /> <br /> こんにちは THINK IT さん!<br /> <br /> 　「capitalize」モディファイアは、name内の小文字の英字を大文字に変換します。このように、モディファイアを使用することで、テンプレートに埋め込まれた変数に対して何らかの処理をさせることができます。<br /> <br /> 　JSTでは、モディファイアとして任意のJavaScript関数を新しくひも付きけることができます。このような仕組みをカスタムモディファイアと言います。カスタムもディファイルを作成するには、テンプレートに渡すオブジェクトの、「_MODIFIERS」というキーに、JSON形式で関数オブジェクトを指定します。<br /> <br /> data._MODIFIERS = {<br /> rank: getRank<br /> }<br /> <br /> 　このオブジェクトをテンプレートに渡します。<br /> <br /> var result = template.process(data);<br /> <br /> 　これで、「rank」モディファイアをテンプレート内で呼び出すと、getRank関数が呼び出されます。rankモディファイアを使って、if構文を使ったサンプルを書き換えたものが、図3-2のです。サンプルファイルは<a href="http://dl.impressbm.co.jp/content/134" target="_blank">こちら</a>からダウンロードできます（808_4.zip/25.6 KB/GPL）。</p> </div>