Rails Turbostream：是否可以动态向元素添加 css 类？

Question

我正在将应用程序从rails 6升级到7，并用turbostreams替换ujs。

现在的ujs

$('#sightings_by_type').html("<%= escape_javascript (render partial: '/member/spotting_sessions/sightings_by_stock_type', locals: { editable: true }) %>")
$('#sighting_added_confirmation').css('display', 'block')
$('#sighting_added_confirmation').fadeOut(2000)

我想用我可用的 css 类替换 fadeOut 调用并更改显示。 但是我不知道如何使用turbo_stream.haml 文件添加该类。 看起来turbo_stream可以作用于元素的全部内容（替换div等），但不能降低到元素属性变化的低水平。

turbo_streams 是解决这个问题的错误方法吗？

我可以将逻辑放入刺激控制器中，但这感觉不合适。

这是到目前为止的 add_sighting.turbo_stream.haml：

= turbo_stream.update "sighting_details", partial: "/member/spotting_sessions/sightings_by_stock_type", locals: { editable: true }

Answer 1

您可以在 Turbo Streams 中使用 JavaScript：

<%= turbo_stream.update "sighting_details", partial: "/member/spotting_sessions/sightings_by_stock_type", locals: { editable: true } %>
<%= turbo_stream.after "sighting_details" do %>
  <script charset="utf-8">
    $('#sighting_added_confirmation').css('display', 'block')
    $('#sighting_added_confirmation').fadeOut(2000)
  </script>
<% end %>

---

您可以进行自定义涡轮流操作：

// app/javascript/application.js

Turbo.StreamActions.style = function () {
  this.targetElements.forEach((target) => {
    target.style = this.templateContent.textContent
  });
};

<%= turbo_stream.action :style, :sighting_details, "display: block;" %>

您也可以将其设为方法：

# config/initializers/turbo_stream_actions.rb

module TurboStreamActions
  def style(...)
    action(:style, ...)
  end

  Turbo::Streams::TagBuilder.include(self)
end

<%= turbo_stream.style :sighting_details, "display: block;" %>