作者さんによると、jquery-tmplは開発されておらず、jsrenderがjquery-tmplに取って代わるライブラリだそうです。
なので、jquery-tmplを使った部分をjsrenderに書き換えて行きたいと思います。以下サンプルコードです。
jquery-tmplで書いたコード
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- jquery-tmpl.js -->
<script type="text/javascript" src="../bower_components/jquery-tmpl/jquery.tmpl.min.js"></script>
</head>
<body>
<div id="main"></div>
</body>
</html>
<!-- jquery-tmplのテンプレート -->
<script id="main_tmpl" type="text/x-jquery-tmpl">
{{each site_info}}
<a href="${url}">
<div>${site_name}</div>
</a>
{{/each}}
</script>
<script type="text/javascript">
(function () {
var data = {
site_info:[
{ url: "http://google.com", site_name: "Google" },
{ url: "http://yahoo.co.jp", site_name: "Yahoo" }
]
};
/* jquery-tmpl テンプレートにdataを渡す */
$('#main_tmpl').tmpl(data).appendTo("#main");
}());
</script>
jsrenderに書き換えコード
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- jsrender.js 読み込み -->
<script type="text/javascript" src="../bower_components/jsrender/jsrender.min.js"></script>
</head>
<body>
<div id="main"></div>
</body>
</html>
<!-- jsrenderのテンプレート -->
<script id="main_tmpl" type="text/x-jsrender">
{{for site_info}}
<a href="{{:url}}">
<div>{{:site_name}}</div>
</a>
{{/for}}
</script>
<script type="text/javascript">
(function () {
var data = {
site_info:[
{ url: "http://google.com", site_name: "Google" },
{ url: "http://yahoo.co.jp", site_name: "Yahoo" }
]
};
/* jsrender テンプレートにdataを渡す */
$("#main").html(
$("#main_tmpl").render(data)
);
}());
</script>
このように基本的な部分は、少しの書き換えで動作するようになりました。