underscore.jsのテンプレート機能が上手く動作しない
前提
underscore.jsを用いてhtmlにテンプレートを作成し、動的に
htmlの内容を変更させたいと考えています。
現在の問題
下記ソースコードのように書いたのですが、上手くテンプレートが
htmlに反映されません。
何が間違っているのか、お伺いしたいです。
HTMLソースコード
<script type = "text/javascript" src = jsファイルがおいてある場所></script>
</head>
<body>
<div class = "container">
<div class = "row">
<div class="container">
<div class="row">
<div class="bootcards-list col-sm-6">
<div class="panel panel-default">
<div class="list-group">
<script id = "temp" type = "text/template">
/*テンプレート*/
<a class="list-group-item" id = "list_<%- data.name %> "href="#<%- data.name %>" onclick="comp('#<%- data.name %>')">
<div class="row">
<div class="col-sm-1">
<img src="<%- data.img %>">
</div>
<div class="col-sm-5">
<h4 class="list-group-item-heading"><%- data.name %></h4>
<p class="list-group-item-text"><%- data.text %></p>
</div>
<div class="col-sm-6">
<p class="list-group-item-text"><%- data.text %></p>
<p class="list-group-item-text"><%- data.text %></p>
</div>
</div>
</a>
</script>
・・・
</body>
JSソースコード
$(function(){
var tmplSrc = $('#temp');
var source = {
data:[
{
"name":"aaa",
"text":"ddd",
"img":"cccc"
},
]
};
var complied = _.template(tmplSrc,source);
$('body').append(complied);
})