JavaScript 模板（下划线）答案

【问题标题】：JavaScript template (underscore)JavaScript 模板（下划线）
【发布时间】：2013-06-12 20:47:41
【问题描述】：

下划线把我难住了！在我的代码中，一切都适用于在 $.when 之后获取数据。 console.log（帖子）；有效，但是当我尝试将其传递给模板并引用时

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

我在网上收到“未捕获的 ReferenceError：未定义帖子”

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

这是整个页面

<!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"

****更新**** ** 感谢你们所有人，我的模板正常工作。 _.each 循环遍历对象数组并从 API 填充 html 和数据块。现在，我需要做的是弹出一个包含特定帖子内容的模式。我正在为我的 .click 事件而苦苦挣扎。所有不同的模态都填充了正确的数据（隐藏时，引导模态），但是当我单击它们相应的 div 时，我不确定如何引用它们。我总是得到第一篇文章的内容。

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

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

【问题讨论】：

console.log(posts) 显示了什么。要使您的代码正常工作，它应该是{posts: {id: 123}}。
你的问题！尝试将<%=posts.id %> 更改为<%=id %>。 Underscore 不知道posts 是什么。
Rocket，发表你的答案，我会为你效劳。
@Shaanimal：嗯。似乎 MickJ 已经搞定了。
我仍然得到 id 未定义。我用上面的对象信息更新了。

标签： javascript jquery underscore.js

【解决方案1】：

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

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

然后

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

【讨论】：

我做了类似的事情，但我仍然得到“Uncaught ReferenceError: post is not defined”
fwiw，我强烈建议使用 lodash 而不是下划线 :)
并注意模板的更改
啊！！！最后！ $("#target").html(_.template(template,{posts:posts} )); _.each 返回了 id。谢谢你！但请继续关注，我相信我会有另一个问题！
我总是用 v,i,l (value,index,list) 编写 lodash 回调

【解决方案2】：

替换

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

与

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

希望这应该可行。

另见：How to use underscore.js as a template engine?

编辑：基于来自 console.log 的更新信息，因为它是一个数组，正如@Shanimal 指出的那样，您需要引用该数组中的第一项或循环遍历它（更好的方法）。

请参阅@Shaanimal 的帖子以了解循环。你仍然需要按照我上面指出的去做。

【讨论】：

米克，事后看来，我应该用模板中的循环编辑你的帖子......我欠你的。
嗯，OP 的问题是通过协作解决的。这很好。

【解决方案3】：

var 帖子 =

    [

       {
            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>

【讨论】：