用Rails帮助器和激励器构建轻量级组件

自定义Railshelpers 模块经常被忽视，但它们可以成为构建轻量级组件和减少Stimulus控制器中的模板的绝佳选择。

Stimulus的一个好处是，你可以通过阅读标记属性迅速推断出功能，但对于有几个值和动作的组件，你可以从隐藏一些实现细节中受益。

让我们来看看我的GitHub风格的Hovercards文章中的例子。

<div class="inline-block"
  data-controller="hovercard"
  data-hovercard-url-value="<%= hovercard_shoe_path(shoe) %>"
  data-action="mouseenter->hovercard#show mouseleave->hovercard#hide"
>
  <%= link_to shoe.name, shoe, class: "branded-link" %>
</div>

hovercard_controller 需要传入一个url 值，并添加两个动作，用于在悬停时显示和隐藏卡片。该控制器被包裹在一个链接中，可以为我们在应用中想要的每一种悬停卡进行样式设计和定制。

如果你只有几个地方使用该控制器，这并不是什么大问题。但如果你想在越来越多的悬停卡类型中重复使用这个控制器，可以尝试添加你自己的Rails助手。

使用方法

app/helpers 文件夹中的模块将自动提供给你在视图中使用。

# app/helpers/hovercard_helper.rb
module HovercardHelper

  # Use a helper to avoid repeating Stimulus controller attributes
  def hovercard(url, &block)
    content_tag(:div,
      "data-controller": "hovercard",
      "data-hovercard-url-value": url,
      "data-action": "mouseenter->hovercard#show mouseleave->hovercard#hide",
      &block)
  end

  # Build your own light-weight "components"
  def repo_hovercard(repo, &block)
    hovercard hovercard_repository_path(repo), &block
  end

  def user_hovercard(user, &block)
    hovercard hovercard_user_path(user), &block
  end
end

使用帮助器允许我们在Ruby中创建自己的 "组件 "来抽象出实现细节。由于Ruby块的力量，我们可以创建灵活的组件，可以根据用途进行定制。

<!-- app/views/timeline.html.erb -->

<%= user_hovercard(@user) do %>
  <%= link_to @user.username, @user %>
<% end %>

<%= repo_hovercard(repository) do %>
  <div class="flex items-center space-x-2">
    <svg></svg> <!-- Some icon -->
    <%= link_to repository.name, repository %>
  </div>
<% end %>

例如，我们可以建立一个repo_hovercard 帮助器，接受一个Repository 模型和一个要渲染的块。我们可以完全控制基于页面上下文的显示内容，但我们不必担心正确连接Stimulus事件的问题。

如果我们想改变我们的Stimulus控制器，它都在一个地方，而不是分散在应用程序的许多视图中。

其他资源

Rails API：帮助器