jsrender使ってviewとロジックをわける

恥を忍んで書きます。業務でアイテム一覧のようなものを表示する際に、コーダーから以下のような素材をもらって（実際のものとは違う。あくまでイメージ）

<div class="div_xxx">
	<p class="p_xxx">アイテム名称</p>
	<p class="p_yyy">期間限定</p> ##期間限定のもののみ
	<img class="img_xxx" src="xxx.png">
</div>

で、エンジニアである自分が、ajax通信で取得したjsonの配列データをもとに、アイテム名称及び画像URLにそれぞれ配列のデータを割り当て、一覧表示するという処理を書いた。以下がそれ。

<!-- <div class="div_xxx">
	<p class="p_xxx">アイテム名称</p>
	<p class="p_yyy">期間限定</p> ##期間限定のもののみ
	<img class="img_xxx" src="xxx.png">
</div> -->

<script>

var el = "";
for (var i = 0; i < list.length; i++) {
	if(list[i].limitFlg === true){
		"<div class='div_xxx'><p class='p_xxx'>" + list[i].name + "</p><p class='p_yyy'>期間限定</p><img class='img_xxx' src='" + list[i].imgUrl + "'></div>"
	} else {
		"<div class='div_xxx'><p class='p_xxx'>" + list[i].name + "</p><img class='img_xxx' src='" + list[i].imgUrl + "'></div>"
	}
}
jQuery("#container").append(el);

</script>

これはひどいw
なにがひどいって、コーダーが組んだ要素を文字列でjsで記述してるので、たとえばそこのデザイン少し変えたいので要素ごにょごにょいじりたいなんてときの保守性という点で最悪ですね（実際のものはもっと複雑な構成です）。

業務が忙しくしばらくこのまま放置していたのですが、最近ようやくjsrender使いました。

BorisMoore/jsrender · GitHub

jquery-tmplというライブラリが有名だったようですが、deprecatedになったようで、でその同じ作者で今でも開発が続けられているのがjsrenderです。

使った結果が以下のものようになります。

<script id="tmpl_item" type="text/x-jsrender">
	{{for list}}
	<div class="div_xxx">
		<p class="p_xxx">{{:name}}</p>
		{{if limitFlg == true}}
		<p class="p_yyy">期間限定</p>
		{{/if}}
		<img class="img_xxx" src="{{:imgUrl}}">
	</div>
	{{/for}}
</script>

/* データの中身は例えば以下のようだとする
var data = { list:
	[
		{
		    "name"		:"aaaa",
		    "imgUrl"	:"aaaa.png",
		    "limitFlg"	:true
		},
		{
		    "name"		:"bbbb",
		    "imgUrl"	:"bbbb.png",
		    "limitFlg"	:true
		},
		{
		    "name"		:"cccc",
		    "imgUrl"	:"cccc.png",
		    "limitFlg"	:false
		}
	]
};
*/

$(document).ready(function(){
	var result = $("#tmpl_item").render(data);
	$("#container").append(result);
});

いわゆる、viewの部分とロジックの部分が分離しています。forとかifあるのも便利ですね。

以上、2,3年前に話題になったであろうものを今にしてやってみるというw