Menu
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. -->
622
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>
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.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
