title: JavaScript template (underscore)
body: <p>Underscore has me stumped! In my code everything works in regards to getting the data after $.when. the console.log (posts); works but when i try to pass it into the template and reference </p>
  
  <pre><code>&lt;h1&gt;&lt;%=posts.id %&gt;&lt;/h1&gt; 
  </code></pre>
  
  <p>I get "Uncaught ReferenceError: posts is not defined" on line </p>
  
  <pre><code>$("#target").html(_.template(template,posts));
  </code></pre>
  
  <p>Here's the whole page</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;  
  &lt;script src="js/api.js"&gt;&lt;/script&gt;   
  &lt;link href="css/styles.css" media="" rel="stylesheet" type="text/css" /&gt; 
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="target"&gt;&lt;/div&gt;
  
  &lt;!-- BEGIN: Underscore Template Definition. --&gt;
  
  &lt;script type="text/template" id="template"&gt;     
  &lt;h1&gt;&lt;%=posts.id %&gt;&lt;/h1&gt;
  &lt;/script&gt;
  
  &lt;!-- END: Underscore Template Definition. --&gt;
  
  &lt;!-- Include and run scripts. --&gt;
  
   &lt;script src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
   &lt;script src="js/underscore.js"&gt;&lt;/script&gt;
  
   &lt;script type="text/javascript"&gt;            
  
      $.when(results).done(function(posts){       
  
      var template = $("#template").html();
      console.log(posts);
      $("#target").html(_.template(template,posts)
      );
      }); 
  
  &lt;/script&gt; 
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>[Object]
   0: Object
   created_at: "2013-04"
   id: "444556663333"
   num_comments: 1
   num_likes: 0
   text: "&lt;p&gt;dfgg&lt;/p&gt;"
   title: "title1"
   updated_at: "2013-04"
   user: Object
     first_name: "bob"
     id: "43633"
     last_name: "ddd"
  </code></pre>
  
  <p><em><strong></em>****</strong><em>Upadated</em><strong><em>*</em>**<em>*</em>**</strong>
  Thanks to all of you I got my templates working. _.each loops through an array of objects and populates chunks of html and data from an API. Now, what i need to do is pop open a modal with that specific posts content. Im struggling with my .click event. All of the different modals populate the correct data (when hidden, bootstrap modal) but im not sure how to reference them when i click on their corresponding div. I always get the post content for the first post. </p>
  
  <pre><code>$(".datachunk").click(function (){ 
  $("#myModal").modal();    
  });
  </code></pre>
  
  <p>.datachunk refers to the current div.datachunk you clicked on. Here is my template:</p>
  
  <pre><code>  &lt;!-- BEGIN: Underscore Template Definition. --&gt;
  &lt;script type="text/template" id="template"&gt;     
   &lt;% _.each(posts,function(post){ %&gt;   
      &lt;div class = "datachunk borderBottom"&gt;  
      &lt;div class="openModall"&gt;&lt;i class="icon-plus-sign-alt"&gt;&lt;/i&gt; &lt;/div&gt;
      &lt;h2&gt;&lt;%= post.title %&gt;&lt;/h2&gt;
   &lt;div class="postInfo"&gt;
        &lt;p&gt;&lt;%= post.user.first_name %&gt;&lt;%= post.user.last_name %&gt;&lt;/p&gt;&lt;p&gt;
     &lt;% var date=moment(post.created_at).format("M/DD/YYYY");%&gt;
         &lt;%= date %&gt;&lt;/p&gt;              
       &lt;/div&gt;
  &lt;/div&gt; &lt;!--datachunk--&gt;
    &lt;% }) %&gt;
  
    &lt;!--BEGIN Modal--&gt;
        &lt;% _.each(posts,function(post){ %&gt;   
      &lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-             labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
      &lt;div class="datachunk"&gt;
       &lt;div class= "postInfo"&gt;                
            &lt;h2&gt;&lt;%= post.title %&gt;&lt;/h2&gt;
      &lt;p&gt;&lt;%= post.user.first_name %&gt;&lt;%= post.user.last_name %&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt; &lt;!--end modal header--&gt;
    &lt;div class="modal-body"&gt;
      &lt;p&gt;&lt;%=post.text %&gt;&lt;/p&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  &lt;!--END Modal--&gt;
  &lt;% }) %&gt;                
  &lt;/script&gt;
  &lt;!-- END: Underscore Template Definition. --&gt;
  </code></pre>