[JavaScript] TypeScriptとか_(underscore.js)のtemplate()とか

2013/05/16

こんにちは。きんくまです。

JS関係のメモをひきつづき。

TypeScriptはこちらのページがまとまっていて、わかりやすかったです。

>> TypeScript クイックガイド

Underscore.js

Backbone.jsというのがあるみたいです。使い方を調べていたのですが、データの追加・削除・更新などをするのに便利そうでした。（たぶん）

>> Backbone.js Advent Calendar 2011

んで、Backbone.jsというのは、Underscore.jsというのに依存しています。
Underscore.jsは他に依存していないので、独立して使うことが可能です。

Underscore.js

配列とかの便利なユーティリティ関数がいっぱいつまったライブラリです。
で、その辺のやつでなくて、個人的に便利！と思ったのがtemplate機能です。

>> Underscore.jsのtemplate触ったメモ

JSでDOMを書くと文字列を連結したり、domにappendChildとかしたりして見通しが悪いのです。

var mydom = '<div>私の名前は' + name +'です</div>';

という感じの文字列の連結とか。文字列足し込んでいくのとかがmendoi。

なので、動的部分を変数にもたせてあげたhtmlのひな形を書けると見やすいです。
Underscoreはそいつに変数を渡してあげるとDOMの文字列が生成されます。

script type=”text/template” となっているのがポイント。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	//ex1
	var personCompiled = _.template($('#person_template').text());
	var personText = personCompiled({
		person:{
			name:'やまだ',
			age:15
		}
	});	
	$('#container').append(personText);

	//ex2
	var listCompiled = _.template($('#list_template').text());
	$('#container').append(listCompiled({
		lists:[
			'りんご','ごりら', 'ラッパ', 'パンツ', 'つみき'
		]
	}));
});
</script>
</head>
<body>

<div id="container"></div>


<script type="text/template" id="person_template">
<div>
名前は<%= person.name %>デス。としは<%= person.age %>デス。
</div>
</script>

<script type="text/template" id="list_template">
<ul>
<% for(var i = 0, len = 5; i < len; i++){ %>
<li>ここがリスト <%= i %> です。変数は <%= lists[i] %>です。</li>
<% } %>
</ul>
</script>

</body>
</html>

あ、いまIE7,8でためしてみたところ、上のコードだと動きませんでした。
script type=”text/html”として、jQueryのところをtext()からhtml()にかえると動きました。
※参考ページです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	//ex1
	var personCompiled = _.template($('#person_template').html());
	var personText = personCompiled({
		person:{
			name:'やまだ',
			age:15
		}
	});	
	$('#container').append(personText);

	//ex2
	var listCompiled = _.template($('#list_template').html());
	$('#container').append(listCompiled({
		lists:[
			'りんご','ごりら', 'ラッパ', 'パンツ', 'つみき'
		]
	}));
});
</script>
</head>
<body>

<div id="container"></div>


<script type="text/html" id="person_template">
<div>
名前は<%= person.name %>デス。としは<%= person.age %>デス。
</div>
</script>

<script type="text/html" id="list_template">
<ul>
<% for(var i = 0, len = 5; i < len; i++){ %>
<li>ここがリスト <%= i %> です。変数は <%= lists[i] %>です。</li>
<% } %>
</ul>
</script>

</body>
</html>