使用动态ID渲染数据与Rails中的jQuery效果一起使用

Question

我正在构建一个Rails应用程序，并且在Rails表中的数据如何用于控制JS / jQuery的某些操作（我不理解）有一层复杂性。

我想做什么：我有一个名为Comments的表。 假设它由post （注释的字符串）， slug （指定它应该出现的某个博客页面）和location （一个与页面上div的id匹配的字符串值）组成的值组成。 重要提示：此div是动态的 - 每个页面上都有不同数量的div，标记为“toc_0”，“toc_1”，依此类推。

最后，我想使用jQuery的.append()或类似的效果（即prepend() ， after()在div旁边放置一个特定注释，其id与匹配slug的页面上的location匹配。

我现在在做什么 ：显然，显示与slug值匹配的注释很容易。 我在我的控制器中这样做：

class BlogsController < ActionController::Base

        @posts = Post.where(slug: params[:id]).all
        @comments = Comment.where(slug: params[:id]).all

end 

在视图中，我使用正常循环渲染@comments - 将其放在帖子旁边的列中。

    <div class="col-sm-8">
        <% @posts.each do |post| %>
                <h2 id="title"><%= post.title %></h2>
                <p id="category"><%= post.category %></p>
                <div id="paragraph"><%= markdown(post.content) %></div>    
        <% end %>
    </div> 

    <div class="col-sm-4">
        <% @comments.each do |comment| %>
            <div class="card-1">
            <h5 class="testcomment"><%= comment.post %></h5> <h5 class="testauthor"></h5>
            </div>
        <% end %> 

    </div><!-- / column -->

那么瞄准会在哪里发生？ 我从该代码中意识到，如果我们将评论“定位”到帖子中的某个div，可能会让我感到困惑。 那是因为我正在使用Markdown gem，它将每个标头标记为DOM中自己的id。 示例实时输出为清晰起见：

 <h3 id="toc_0">Example Heading 1</h3>

     <p>Hello World, this is the first para</p>

 <h3 id="toc_1">Example Heading 2</h3>

当页面呈现时，我希望控制器不仅呈现与页面slug匹配的注释（就像现在一样）：我希望它附加与上面引用的location列匹配的div id旁边的注释。

由于这些id是动态的，我可以使用jQuery来“定位”id而不引用“toc_0”，“toc_1”等，或者是否需要使用某些控制器魔法来完成？

Answer 1

如果您在posts模型中添加了has_many: comments ，那么这将使这更容易。 然后，对于每个帖子，你可以做一些事情，看看它是否有评论或与之相关的评论集。

<% @posts.each do |post| %>
 <div class="row">
  <div class="col-sm-8">
    <h2 id="title"><%= post.title %></h2>
    <p id="category"><%= post.category %></p>
    <div id="paragraph"><%= markdown(post.content) %></div>    
  </div>
  <div class="col-sm-4">
    <% if @post.comments.count > 0 %> 
      <% @post.comments.each do |comment| %>
        <div class="card-1">
          <h5 class="testcomment"><%= comment.post %></h5> <h5 class="testauthor"></h5>
        </div>
      <% end %> <!-- end each --> 
    <% end %> <!-- end if -->
  </div>
<% end %> <!-- end each post -->