【jQuery】【GitHub】 GitHub APIから取得した情報を jQueryテンプレートで表示する

自分のサイトを作ったのですが、
色々とリファクタリングしたいところがある。

それに先立って、gitへのpush履歴が、infoページに表示されるように改修する。
「もらったアドバイス反映したよー」って言いたいもんね。

表示したいもの

• 日付
• commitコメント
• commit内容が見れるURL

こんなところかな。

GitHub API

このエンドポイントで、希望の情報が全部取れる。

https://api.github.com/repos/sekaiya/iena/commits

GitHubからのデータ取得

jQueryのgetJSONメソッドを利用する

$.getJSON("https://api.github.com/repos/sekaiya/iena/commits", function(res){
	datas= new Array();
	for (var i=0 ; i < res.length ; i++){
		var data = new Data(res[i].commit.date, res[i].commit.message, res[i].html_url);
		datas.push(data);
	}

テンプレートファイルの作成

<div class="content_title">info</div>
<ul>
	<li>${date} </li>
	<li>${comment}</li>
	<li>${url}</li>
</ul>

テンプレートの読み込み・置換

$("#contents").load("inc/info.inc", function(){
	changed = $.tmpl($("#contents"), datas);
	$("#contents").html(changed);
});

　
テンプレートが解釈されてる！

テンプレートファイルにeach文を追加

tmplメソッドは、渡したデータがリストだと、
その長さ回数分、テンプレートが読み込まれる仕様みたい。

つまり、このままだと、タイトルの「info」が何個も表示されてしまう。
これでは良くないので、

• データ構造を見直し（直でリストを渡さない）
• テンプレートファイルに each文を追加

データ構造を見直し

■修正前

$.tmpl($("#contents"), datas);

↓
■修正後

$.tmpl($("#contents"), [{contents: datas}]);

テンプレートファイルにeach文を追加

■修正前

<div class="content_title">info</div>
<ul>
	<li>${date} </li>
	<li>${comment}</li>
	<li>${url}</li>
</ul>

↓
■修正後

<div class="content_title">info</div>
-- under contructing --
{{each contents}}
<ul>
　　<li>${$value.date}</li>
　　<li>${$value.comment}</li>
　　<li>${$value.url}</li>
</ul>
{{/each}}

　
これで、infoが一度しか出なくなりました。やった！

はまったところ

jQueryのa要素をb要素に入れ替えるときは

a = b; ←だめ
a.html(b)　←OK

FindBugs起動していたらエラーメッセージ出ていたのに、
起動してなかったので嵌ってしまった。
JavaScriptいじるときは、必ず起動しておこう。。
エラーメッセージないと辛いもんね。。

整形する前に一旦コミット。