我是RoR的新手,我最近遇到了一个问题,因为我试图以不同的模态显示不同的帖子。为了上下文化,我有一个主页,每个帖子都会显示。每个帖子都包含作者,内容,类似按钮和评论按钮。我希望评论按钮打开一个模式,再次包含作者的姓名,内容和评论帖子的区域。问题是我点击的每个模态包含相同的作者和相同的内容,即使我点击的评论按钮来自不同的帖子。确切地说,模态中显示的内容来自最近发布的帖子。告诉我你是否需要特别的东西,我很乐意用你要问我的代码编辑这篇文章。
显示帖子:
<% @posts.each do |post| %>
<div class="media">
<a class="media-left" href="#">
<div class='circle-icon'>
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
</div>
</a>
<div class="media-body">
<h2 class="media-heading"><%= post.user.first_name %> <%= post.user.last_name %></h2>
<h4><%= post.content %> </h4>
<br>Submitted <%= time_ago_in_words (post.created_at) %> ago<br>
<%= button_to like_post_path(post), method: :put do %>Like<%= post.get_upvotes.size %>
<% end %>
<a href="#" data-toggle="modal" data-target="#myModal" class="btn btn-xs btn-primary"><span class="glyphicon glyphicon-comment"></span> Comment</a>
这是我的模态:
<!-- Modal -->
<div class="modal fade .local-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><%= post.user.first_name %> <%= post.user.last_name %></h4>
</div>
<div class="modal-body">
<p><%= post.content %> </p>
<hr>
<fieldset class="form-group">
<label for="exampleTextarea">Write your comment:</label>
<textarea class="form-control" id="exampleTextarea" rows="3"> </textarea>
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" >Like</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Comment</button>
</div>
</div>
</div>
</div>
这是我的JS脚本:
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
$('[data-toggle="popover"]').popover({ html : true});
});
$('#popover').popover({
html : true,
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
</script>