如何在 Rails 6 中的多个位置使用 Jquery 渲染模型

Question

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

1. PageController 中的 Pagnigation 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

1. 在_post.html.erb有一个部分渲染帖子

2. 在首页渲染这个部分：

<% 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, 'Next', :remote => true, :onclick => "render_partial();") %>");
      <% end %>
    }
  </script>
<% end %>

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

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

Answer 1

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

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