読者です 読者をやめる 読者になる 読者になる

せかいや

いまいるここを、おもしろく http://sekai-in-the-box.appspot.com/

【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);
});


 
テンプレートが解釈されてる!
f:id:sekaiya:20130830010209j:plain


 

テンプレートファイルに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が一度しか出なくなりました。やった!
f:id:sekaiya:20130830073912j:plain


 

はまったところ

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

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

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


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