如何在Rails视图中实现多控制器驱动的组件/局部视图？

针对你想在同一页面嵌入多个独立数据源组件的需求，下面是几种符合Rails生态的实现方式：

方式1：主控制器聚合数据（最传统的Rails做法） #

Rails的MVC模式默认是一个请求对应一个控制器动作，所以可以在首页对应的控制器（比如HomeController）里同时查询多个模型的数据，再传递给视图，用局部视图或ViewComponents渲染各个组件区块。

代码示例： #

# app/controllers/home_controller.rb
class HomeController < ApplicationController
  def index
    # 同时获取出版社和书籍数据
    @publishers = Publisher.order(name: :asc).limit(10)
    @books = Book.order(published_at: :desc).limit(15)
  end
end

视图中用局部视图渲染：

# app/views/home/index.html.erb
<!-- 左侧出版社列表 -->
<div class="blue-block">
  <%= render partial: "publishers/list", locals: { publishers: @publishers } %>
</div>

<!-- 右侧书籍列表 -->
<div class="pink-block">
  <%= render partial: "books/list", locals: { books: @books } %>
</div>

或者用ViewComponents封装视图逻辑（其实完全适用，你之前可能误解了它的用法）：

<%= render Publishers::ListComponent.new(publishers: @publishers) %>
<%= render Books::ListComponent.new(books: @books) %>

方式2：AJAX异步加载组件（接近前端框架模式） #

如果不想在主控制器里耦合多个模型的查询逻辑，或者需要组件独立刷新，可以用AJAX让每个组件从各自的控制器异步获取数据。

代码示例： #

首页视图预留容器：

# app/views/home/index.html.erb
<div id="publisher-container" class="blue-block"></div>
<div id="book-container" class="pink-block"></div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // 异步加载出版社列表
    fetch('/publishers/partial')
      .then(res => res.text())
      .then(html => document.getElementById('publisher-container').innerHTML = html);

    // 异步加载书籍列表
    fetch('/books/partial')
      .then(res => res.text())
      .then(html => document.getElementById('book-container').innerHTML = html);
  });
</script>

添加控制器的专用动作返回局部视图：

# app/controllers/publishers_controller.rb
class PublishersController < ApplicationController
  def partial
    @publishers = Publisher.order(name: :asc).limit(10)
    render partial: "list", layout: false # 只返回组件视图，不带布局
  end
end

# app/controllers/books_controller.rb
class BooksController < ApplicationController
  def partial
    @books = Book.order(published_at: :desc).limit(15)
    render partial: "list", layout: false
  end
end

别忘了在routes.rb添加对应路由：

get 'publishers/partial', to: 'publishers#partial'
get 'books/partial', to: 'books#partial'

方式3：使用Cells组件库（独立逻辑的视图组件） #

Cells是Rails生态中专门用来构建带独立逻辑的可复用组件的工具，每个组件可以像迷你控制器一样自己处理数据查询，完美匹配你想要的“独立控制器驱动组件”的需求。

代码示例： #

1. 创建出版社组件：

# app/cells/publisher_cell.rb
class PublisherCell < Cell::ViewModel
  def list
    @publishers = Publisher.order(name: :asc).limit(10)
    render
  end
end

对应的组件视图：

# app/cells/publisher/list.html.erb
<h3>出版社列表</h3>
<% @publishers.each do |publisher| %>
  <div><%= publisher.name %></div>
<% end %>

2. 创建书籍组件同理，然后在首页视图中直接调用：

# app/views/home/index.html.erb
<div class="blue-block">
  <%= cell(:publisher).list %>
</div>
<div class="pink-block">
  <%= cell(:book).list %>
</div>

纠正一个理解偏差 #

Rails中不是必须1控制器对应1模型，但核心原则是一个HTTP请求对应一个控制器动作。如果想要组件有独立的数据逻辑，要么在主控制器聚合数据，要么用AJAX拆分请求，要么用Cells这类组件库封装独立逻辑。

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