こんにちは、廣川です。
今回はHTMLの描画についてです。

通常のWebアプリケーションだと、JSPなどでHTMLを生成して、そのHTMLを返却しているかと思いますが、
今回のアプリは、AeroGearで取得したデータを、その場で描画し、動的に生成しています。
HTMLの内容を動的に生成するにあたって、underscoreというライブラリの、「_.template()」関数を使用しました。

まず、HTMLファイルに、以下のようなテンプレートを用意します。

 <script type="text/template" id="tmpl_rss">
 <div id="dragArea"><ul id="sort-drop-area">
  <li>
   <% _.each( rssAll , function(rss) { %>
   <ul>
    <li><i id="rssIcon_id_<%= rss.id %>" /><span id="rss_id_<%= rss.id %>">
    <a href="<%= rss.url %>"><%= rss.name %></a></span></li>
   </ul>
   <% }) %>
  </li>
 </ul></div>
</script>

JavaScriptファイルに、以下のような処理を記述します。

	// ①テンプレートを取得する
	var tmpl_rss = _.template($('#tmpl_rss').html());
	// ②動的に描画する箇所を指定。この場合だとidがrssのdivの中
	$('div#rss').html(tmpl_rss(
		{
			// ③rssAllという変数にデータストアに格納された情報を渡す
			rssAll:rssStore.read(),
		}
	));

こうすることで、AeroGearを用いて取得したRSSの一覧を描画することが出来ます。
この処理は、RSSの取得成功時の処理に記述すると良いでしょう。
つまり、こうなります。

	var readOption = {
				success:function(data, textStatus, xhr){
					rssStore.save(data);
					var tmpl_rss = _.template($('#tmpl_rss').html());
					$('div#rss').html(tmpl_rss(
						{
							rssAll:rssStore.read(),
						}
					));
				},
		};
	rssPipe.read(option);

上記の処理を、画面読み込み時に呼び出す等すれば、動的に情報を読み込む処理の完成です。
ただ、ここで注意しなくてはならないのは、イベントのバインディングは、DOMを動的に生成した後にしなくてはならない、ということです。

	var readOption = {
				success:function(data, textStatus, xhr){
					rssStore.save(data);
					var tmpl_rss = _.template($('#tmpl_rss').html());
					$('div#rss').html(tmpl_rss(
						{
							rssAll:rssStore.read(),
						}
					));
				},
		};
	rssPipe.read(option);

	// ①RSSのリンクをクリックしたときに、何かしらの処理を行いたい
	$( "a.rss_link" ).click(function( event ) {
		/* 何かしらの処理 */
		return false;
	});

例えば、RSSのリンクをクリックした時に、リンクに遷移する以外の特別な動作をさせたいとします。
そうした時に①のように、クリックイベントに処理をバインディングさせるかと思います。
しかし上記の記述では、クリックしてもリンク先に遷移するだけの通常動作になってしまいます。
何故かというと、①の段階では、まだ「a.rss_link」のDOMが作成されていないからです。
このクラスを持つタグは、「_.template()」を実行した後に初めて生成されます。
そのため、以下のように記述を変更する必要があります。

	var readOption = {
				success:function(data, textStatus, xhr){
					rssStore.save(data);
					var tmpl_rss = _.template($('#tmpl_rss').html());
					$('div#rss').html(tmpl_rss(
						{
							rssAll:rssStore.read(),
						}
					));

					// ① ↑で描画してから、clickイベントに処理をバインディングさせる
					$( "a.rss_link" ).click(function( event ) {
						/* 何かしらの処理 */
						return false;
					});
				},
		};
	rssPipe.read(option);

次は「JQueryでのドラッグ＆ドロップについて」です。