Rails应用中点击不同链接在同一DIV渲染多个Partial的实现方案

嘿，你已经搞定了基础的AJAX渲染，离目标只差几步啦！下面我给你一步步拆解怎么实现点击不同链接在同一个DIV里切换不同Partial：

1. 扩展侧边栏的链接 #

给每个要切换Partial的链接都加上remote: true，并且通过URL参数告诉控制器要渲染哪个Partial。比如修改你的侧边栏代码：

<li>
  <%= link_to user_path(current_user, partial: 'partial1'), remote: true do %>
    <i class="glyphicon glyphicon-home"></i> Partial1
  <% end %>
</li>
<li>
  <%= link_to user_path(current_user, partial: 'partial2'), remote: true do %>
    <i class="glyphicon glyphicon-user"></i> Partial2
  <% end %>
</li>
<li>
  <%= link_to user_path(current_user, partial: 'partial3'), remote: true do %>
    <i class="glyphicon glyphicon-cog"></i> Partial3
  <% end %>
</li>

这里的partial: 'xxx'就是传递给控制器的标识，用来指定要渲染的Partial文件。

2. 修改控制器动作处理参数 #

打开对应的控制器（比如UsersController），在show动作里接收这个参数，确定要渲染的Partial：

def show
  @user = current_user
  # 默认渲染partial1，防止参数为空的情况
  @partial_to_render = params[:partial] || 'partial1'
  # 响应AJAX请求（remote: true会触发js格式的请求）
  respond_to do |format|
    format.html
    format.js
  end
end

注意：如果你的Partial不在控制器对应的视图文件夹下（比如放在shared文件夹），可以在这里把路径补全，比如@partial_to_render = "shared/#{params[:partial]}" || 'shared/partial1'。

3. 创建JS模板渲染Partial #

在app/views/users文件夹下创建show.js.erb文件（和控制器动作同名的JS模板），用来把Partial插入到目标DIV里：

// 假设你的目标DIV的id是content-container，记得在页面里提前定义这个DIV
$('#content-container').html("<%= j render partial: @partial_to_render, locals: { user: @user } %>");

• j是escape_javascript的简写，用来转义Partial里的特殊字符，避免JS报错
• locals: { user: @user }是把控制器里的@user变量传递给Partial，按需调整即可

4. 在页面中添加目标DIV #

确保你的页面（比如application.html.erb或者对应的视图页面）里有用来展示Partial的容器：

<div id="content-container">
  <!-- 页面加载时默认渲染partial1 -->
  <%= render partial: 'partial1', locals: { user: current_user } %>
</div>

新手注意事项 #

• Partial文件命名必须以下划线开头，比如_partial1.html.erb，路径要和控制器里指定的一致
• 如果是Rails 7及以上版本，默认没有包含jQuery和UJS，需要先在Gemfile里添加gem 'jquery-rails'，然后在app/assets/javascripts/application.js里加入：

  //= require jquery
  //= require rails-ujs
  

  之后运行bundle install重启服务器即可。

内容的提问来源于stack exchange，提问作者codegirl