JavaScriptTemplates（JST）入門！

<textarea><textarea> <div id="article_body"> <h2>Google AJAX Feed APIを使った外部サイトのRSS埋め込み</h2> <p>　それでは、図2を見てみましょう。このサンプルでは、「URL」のテキストボックスに「<a href="http://thinkit.jp/rss/rss20.xml">http://thinkit.jp/rss/rss20.xml</a>」などのRSSのURLを入力して「送信」を押すと、Google AJAX Feed APIを使って、指定されたRSSを取得し、RSS内の各記事のタイトルをJSTを使って描画します。サンプルファイルは<a href="http://dl.impressbm.co.jp/content/136" target="_blank">こちら</a>からダウンロードできます（808_2.zip/25.4 KB/GPL）。<br /> <br /> 　このサンプルでもHTMLとJavaScriptを完全に分離しています。HTMLファイルでは、サンプル1でも読み込んでいた、jQuery、JSTに加えて、Google AJAX Feed APIのライブラリファイルと、このサンプルアプリケーションのために自作したsample2.jsを読み込んでいます。<br /> <br /> 　このサンプルでは、「送信」ボタンを押すとテキストボックスに入力された値をurlという変数に代入します。<br /> <br /> var url = $('#url').val();<br /> <br /> 　このURLをGoogle AJAX Feed APIに渡して、RSSを取得させます。</p> <p class="img"><a href="/images/article/808-201.png" target="_blank"><img src="/images/article/808-201-t.png" /></a></p> <h2>JSTテンプレートでのforループの使い方</h2> <p>　それでは、取得されたRSSのデータの描画のサンプルを通じて、JSTによるforループ構文を紹介していきます。今回のサンプルで使用されているJSTテンプレートは以下の通りです。<br /> <br /> </p><ul>{for entry in entries}<br /> <li>${entry.title}</li><br /> {/for}</ul><br /> <br /> 　これがサンプル1と同様に非表示化された<textarea>タグに囲われています。<br /> <br /> 　まず、Google AJAX Feed APIのマニュアルで、「提供される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>）」を確認します。このサンプルでは、次のようにすることで、entries[]配下の要素をテンプレートでアクセスできるようにしています。<br /> <br /> var template = $('#rssTemplate').val();<br /> var data = {entries: result.feed.entries}<br /> var result = template.process(data);<br /> <br /> 　そして、以下のようなforループ構文を使うと、配列内の要素一つ一つに対して、繰り返し同じ内容で描画をさせることができます。<br /> <br /> {for 配列内の要素名 in 配列}<br /> 配列内の要素用テンプレート<br /> {/for}<br /> <br /> 　配列内の要素用テンプレートでは、${配列内の要素名}で配列内の要素の値を使用することができます。今回のサンプルでは、配列内の要素は、以下のようなオブジェクトです。<br /> <br /> {title: 'タイトル1'}<br /> <br /> 　テンプレート内では、${}に指定する値がさらにオブジェクトである場合、「${entry.title}」のようにして、子オブジェクトの値を埋め込むことができます。<br /> <br /> 　次は、サンプルを少し拡張して、if構文やモディファイアについて紹介していきます。