Fatal编程技术网

JavaScript模板（下划线）

javascript jquery

JavaScript模板（下划线）,javascript,jquery,underscore.js,Javascript,Jquery,Underscore.js,我被难住了！在我的代码中，关于在$.when之后获取数据，一切都起作用。console.log（posts）；但当我尝试将其传递到模板和引用中时 <h1><%=posts.id %></h1> 这是整页 <!DOCTYPE html> <html> <head> <script src="js/api.js"></script> <link href="css/styles.css

我被难住了！在我的代码中，关于在$.when之后获取数据，一切都起作用。console.log（posts）；但当我尝试将其传递到模板和引用中时

<h1><%=posts.id %></h1>
这是整页

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






×
更换

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

希望这能奏效

另见：

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

请参阅@Shanimal的帖子了解循环。你仍然需要按照我上面所说的去做。

就像你最初发布的那样

$("#target").html(_.template(template,{posts:posts}));
然后
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>

[
{
id:1，
帖子：“帖子1”
},
{
id:2，
帖子：“帖子2”
},
{
id:3，
帖子：“帖子3”
},
{
id:4，
帖子：“帖子4”
},
{
id:5，
帖子：“帖子5”
}
];
console.log（posts）显示什么。要使代码正常工作，它应该是
{posts:{id:123}}
。这是您的问题！尝试将
更改为
。下划线不知道那里有什么。
posts
。火箭，把你的答案贴出来，我会相信你的。@Shanimal:Meh。看来MickJ已经搞定了，我还是没弄清楚身份证。我更新了上面的对象信息。我做了类似的事情，但我仍然得到“未捕获引用错误：未定义post”fwiw，我强烈建议使用lodash而不是下划线：）并注意模板的更改！！！终于$html（35;.template（template，{posts:posts}））；带着uu。每个人都返回了身份证。谢谢！但请继续关注，我肯定我还有另一个问题！我总是用v，i，l（值，索引，列表）Mick写lodash回调，事后看来我应该用模板中的循环编辑你的帖子。。。我欠你的，OP的问题是通过合作解决的。这很好。 
$("#target").html(_.template(template,posts));

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

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

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

    [

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