前提

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);
})