JavaScript模板(下划线)

Ant*_*ony 4 javascript jquery underscore.js

下划线让我难过!在我的代码中,一切都与$ .when之后获取数据有关.console.log(帖子); 但是当我尝试将其传递给模板和参考时

<h1><%=posts.id %></h1> 
Run Code Online (Sandbox Code Playgroud)

我在网上得到"Uncaught ReferenceError:posts not defined"

$("#target").html(_.template(template,posts));
Run Code Online (Sandbox Code Playgroud)

这是整个页面

<!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>
Run Code Online (Sandbox Code Playgroud)

[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"
Run Code Online (Sandbox Code Playgroud)

****Upadated ****** 感谢大家,我的模板正常运行._.each循环遍历一个对象数组,并从API中填充html和数据块.现在,我需要做的是弹出一个具有特定帖子内容的模态.我正在努力解决我的.click事件.所有不同的模态填充正确的数据(当隐藏,引导模态)但我不知道如何在我点击相应的div时引用它们.我总是得到第一篇文章的帖子内容.

$(".datachunk").click(function (){ 
$("#myModal").modal();    
});
Run Code Online (Sandbox Code Playgroud)

.datachunk是指您单击的当前div.datachunk.这是我的模板:

  <!-- 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. -->
Run Code Online (Sandbox Code Playgroud)

Mic*_*ckJ 5

更换

$("#target").html(_.template(template,posts));
Run Code Online (Sandbox Code Playgroud)

$("#target").html(_.template(template,{posts:posts}));
Run Code Online (Sandbox Code Playgroud)

希望这应该工作.

另请参阅:如何使用underscore.js作为模板引擎?

编辑:基于来自console.log的更新信息,因为它是一个数组,因为@Shanimal指出你需要引用该数组中的第一项或循环它(更好的方法).

请参阅@ Shanimal的帖子进行循环.你仍然需要像我上面指出的那样做.


Sha*_*mal 5

就像你最初发布的......

$("#target").html(_.template(template,{posts:posts}));
Run Code Online (Sandbox Code Playgroud)

然后

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