jQuery tmplで再帰処理をしてツリービューを生成する

jQuery tmpl を利用してツリービューを生成したいなぁなんて考えた時に。

var tree = {
	"data" : {
   		"name" : 'hoge'
	}
	"children" : [
		{"data" : {"name" : "fuga"}}
		{"data" : {"name" : "homu"}}
	]
}

のようなデータがあった場合

<script id="hogeTemplate" type="text/x-jquery-tmpl">&#160;
    <li>
        <a href="#">${data.name}</a>
        <ul>
            {{if children}}
                {{tmpl(children) "#hogeTemplate"}}
            {{/if}}
        </ul>
    </li>
</script>

というようなテンプレートを作り

var tmp = jQuery('#hogeTemplate').tmpl(tree);

としてやることでhtmlのツリー構造は生成できる

{{tmpl(子データ "テンプレート名")}} とすることでテンプレートを呼び出すことができるので
テンプレート名に自分自身の名前を入れてやる。

データがない場合を考えて{{if}}で制御してやる必要はあるみたい