[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とかしたりして見通しが悪いのです。

1	`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>