JavaScript template (underscore)

Question

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

<h1><%=posts.id %></h1>

I get "Uncaught ReferenceError: posts is not defined" on line

$("#target").html(_.template(template,posts));

Here's the whole page

<!DOCTYPE html>
<html>
<head>  
<script src="js/api.js"></script>   
<link href="css/styles.css" media="" rel="stylesheet" type="text/css" /> 
</head>
<body>

<div id="target"></div>

<!-- BEGIN: Underscore Template Definition. -->

<script type="text/template" id="template">     
<h1><%=posts.id %></h1>
</script>

<!-- END: Underscore Template Definition. -->

<!-- Include and run scripts. -->

 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/underscore.js"></script>

 <script type="text/javascript">            

    $.when(results).done(function(posts){       

    var template = $("#template").html();
    console.log(posts);
    $("#target").html(_.template(template,posts)
    );
    }); 

</script> 

</body>

[Object]
 0: Object
 created_at: "2013-04"
 id: "444556663333"
 num_comments: 1
 num_likes: 0
 text: "<p>dfgg</p>"
 title: "title1"
 updated_at: "2013-04"
 user: Object
   first_name: "bob"
   id: "43633"
   last_name: "ddd"

****Upadated****** 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.

$(".datachunk").click(function (){ 
$("#myModal").modal();    
});

.datachunk refers to the current div.datachunk you clicked on. Here is my template:

  <!-- BEGIN: Underscore Template Definition. -->
<script type="text/template" id="template">     
 <% _.each(posts,function(post){ %>   
    <div class = "datachunk borderBottom">  
    <div class="openModall"><i class="icon-plus-sign-alt"></i> </div>
    <h2><%= post.title %></h2>
 <div class="postInfo">
      <p><%= post.user.first_name %><%= post.user.last_name %></p><p>
   <% var date=moment(post.created_at).format("M/DD/YYYY");%>
       <%= date %></p>              
     </div>
</div> <!--datachunk-->
  <% }) %>

  <!--BEGIN Modal-->
      <% _.each(posts,function(post){ %>   
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-             labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <div class="datachunk">
     <div class= "postInfo">                
          <h2><%= post.title %></h2>
    <p><%= post.user.first_name %><%= post.user.last_name %></p>
      </div>
    </div>
  </div> <!--end modal header-->
  <div class="modal-body">
    <p><%=post.text %></p>
  </div> 
</div>
<!--END Modal-->
<% }) %>                
</script>
<!-- END: Underscore Template Definition. -->

What does console.log(posts) show. For your code to work, it should be {posts: {id: 123}}. — gen_Eric
– gen_Eric, Commented Jun 12, 2013 at 20:57
There's your problem! Try changing <%=posts.id %> to <%=id %>. Underscore has no idea what posts is there. — gen_Eric
– gen_Eric, Commented Jun 12, 2013 at 21:02
I still get id is not defined. I updated with object info above. — Anthony
– Anthony, Commented Jun 12, 2013 at 21:05

Shanimal · Accepted Answer · 2013-06-12 21:09:24Z

5

Like you originally posted...

$("#target").html(_.template(template,{posts:posts}));

then

<script type="text/template" id="template">     
    <% _.each(posts,function(v,i,l){ %> 
    <h1><%= v.id %></h1>
    <% }) %>
</script>

answered Jun 12, 2013 at 21:09

Shanimal

11.8k7 gold badges67 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Anthony Over a year ago

I did something similar to this but i still get "Uncaught ReferenceError: post is not defined"

Shanimal Over a year ago

fwiw, I HIGHLY recommend using lodash instead of underscore :)

Shanimal Over a year ago

and the note the change to the template as well

Anthony Over a year ago

ah!!! finally! $("#target").html(_.template(template,{posts:posts} )); with the _.each has returned the id. thank you! but stay tuned, im sure i will have another question!

Shanimal Over a year ago

i always write the lodash callbacks with v,i,l (value,index,list)

|

Community · Accepted Answer · 2017-05-23 12:17:33Z

5

Replace

$("#target").html(_.template(template,posts));

with

$("#target").html(_.template(template,{posts:posts}));

Hopefully that should work.

Also see: How to use underscore.js as a template engine?

Edit: Based on updated information from console.log, since its an array, as @Shanimal pointed out you need to either reference the first item in that array or loop through it(better approach).

Please see @Shanimal's post for looping. You would still need to do as I pointed above.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Jun 12, 2013 at 20:58

MickJ

2,2273 gold badges22 silver badges35 bronze badges

2 Comments

Shanimal Over a year ago

Mick, in hindsight I should have edited your post with the loop in the template... I owe you.

MickJ Over a year ago

Well, the OP's problem was solved through a collaborative effort. And that's good.

dinesh_malhotra · Accepted Answer · 2014-02-21 05:41:54Z

0

var posts =

    [

       {
            id:1,
            post:"post 1"
        },

        {
            id:2,
            post:"post 2"
        },
        {
            id:3,
            post:"post 3"
        },
        {
            id:4,
            post:"post 4"
        },
        {
            id:5,
            post:"post 5"
        }
    ];



  <div id="target_5"></div>


  <script type="text/template" id="template_5">
   <% _.each(posts,function(post,index,arr){ %>
    <h1><%= post.id %></h1>
   <% }); %>
 </script>

answered Feb 21, 2014 at 5:41

dinesh_malhotra

1,87717 silver badges10 bronze badges

Collectives™ on Stack Overflow

JavaScript template (underscore)

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related