如何解决热线turbo_stream_from单次更新错误

最近，我们在一些Stimulus代码中遇到了一个错误。我们试图对一个小部分进行流式更新，发现数据只在第一次更新时刷新。

以下是我们使用的代码。

模板

1
2
3
4
<%= turbo_stream_from "revenue" %>
<div id="revenue">
  <%= render partial: 'metrics/revenue', locals: { revenue: @revenue } %>
</div>

模型

1
2
3
4
5
6
7
class Sale < ApplicationRecord
  after_commit -> { broadcast_replace_to "revenue", partial: "metrics/revenue", locals: { revenue: Sale.total }, target: "revenue" }

  def self.total
    pluck(:amount).sum
  end
end

broadcast_replace_to是用来触发替换流动作的。关于Turbo动作的文档很稀少，但是我们可以合理地预期，这个方法会用一个新的DOM元素来替换一个DOM元素。然而。 broadcast_replace_to只对一个DOM元素进行一次更新。这导致了一个奇怪的bug，即第一次模型更新会触发页面的重新渲染，但随后的更新却不会。

最后，我们通过切换到更新来修复这个错误。下面是新的模型代码：

1
2
3
class Sale < ApplicationRecord
  after_commit -> { broadcast_update_to "revenue", partial: "metrics/revenue", locals: { revenue: Sale.total }, target: "revenue" }
end

希望这能为你节省一些调试时间!