如何在 Rails 6 中的多处使用 Jquery 渲染模型

问题描述

我在尝试使用 Jquery 和 Kaminari 渲染更多模型时遇到问题

1. PageController 中的分页 Post 模型

def home
  if "default" == @tab_id || "PostForYou" == @tab_id
    @buffers = Post.all.sort_by {|post| cal_post_hot_point(post)}.reverse
    @buffers = Post.where("created_at >= ?",1.week.ago.utc)
    @posts = Kaminari.paginate_array(@buffers).page(params[:page]).per(10)
  end
end

2. 在 _post.html.erb

   中有部分渲染帖子

3. 在主页中渲染此部分：

<% if @posts.present? %>
  <div id="home_infinite_scroll">
    <%= render @posts %>
  </div>
  <div class="home_pagination_button" id="home_pagination">
    <%= link_to_next_page(@posts,'Next',remote: true,:onclick => "render_partial();") %>
  </div>
  <script>
    function render_partial(){
      // Append new data
      $("<%=j render @posts %>").appendTo($("#home_infinite_scroll"));
    
      // Update pagination link
      <% if @posts.last_page? %>
        $('#home_pagination').html("<a>End</a>");
      <% else %>
        $('#home_pagination').html("<%=j link_to_next_page(@posts,:remote => true,:onclick => "render_partial();") %>");
      <% end %>
    }
  </script>
<% end %>

问题：当我点击“下一步”按钮时，只重复了前 10 个帖子。但是，如果我创建 home.js.erb 并将脚本代码放入其中，它将起作用。

我不想在每次需要渲染帖子时创建新的 js 文件。有人有解决办法吗？

解决方法

.html.erb 文件中所有嵌入的 Ruby 语句都在页面首次呈现时进行解释。因此，在您的 <script> 块中，render @posts 发生在页面的 HTML 生成时，而不是在函数被触发时。因此，此时 @posts 可能有前 10 条记录。该脚本只是静态 JS，每次单击按钮时，Javascript 都会尽职尽责地将其附加到 div。

正确的做法是您试图避免的方式（将 JS 放在 home.js.erb 中）。有效的原因是当用户单击按钮时，它会执行 AJAX 调用 (remote: true) 返回到您的应用程序，然后调用您的控制器。然后，您的控制器（大概）将下一页记录加载到 @posts 中，以便当 home.js.erb 运行时，@posts 实际上包含下一组记录。