javascript - 处理数据禁用的热线方式是什么？

Question

我开始使用Hotwire在我的 Rails 应用程序中，我实现了类似于教程视频的内容，其中提交了表单并刷新了页面的另一部分。就像在视频中一样，我必须实现自己的重置表单 Controller :

import {Controller} from "stimulus"

export default class extends Controller {
  reset() {
    this.element.reset()
  }
}

重置表单中的值。表单看起来像:

<%= form_with(model: @invitation,
              data: {controller: "reset-form",
                     action: "turbo:submit-end->reset-form#reset"}) do |form| %>
  <!-- other form elements -->
  <%= form.submit "Invite" %>
<% end %>

在按钮中生成如下:

<input type="submit" name="commit" value="Invite" data-disable-with="Invite">

因为有一个 data-disable-with ，当您按下按钮时，它会被禁用以避免双击提交，这很棒。问题是 this.element.reset()不重置它。
处理这个问题的正确方法是什么？
我不是在寻找解决方法，我知道很多，但我正在寻找解决这个问题的干净解决方案。
这是由 UJS 引起的按钮的禁用吗？这是否意味着不应在 Stimulus 应用程序中使用 UJS？
我可以从 reset 重新启用按钮JavaScript 函数，但如果输入按钮是这样指定的:

<%= form.submit "Invite", data: {disable_with: "Inviting, please wait..."} %>

然后按钮的原始标签( value )丢失了，我没有办法重新建立它，这让我觉得无论是实现这个功能(UJS？)它不是为热线/水疗应用程序设计的，并期望页面完全重新加载。
我可以扔:

config.action_view.automatically_disable_submit_tag = false

并使用刺激 Controller 实现我自己的双击预防，但这感觉不对。问题不在于属性 data-disable-with但它是如何实现的。

Answer 1

在用户操作时替换页面上的 HTML 内容的最“热线方式”是使用 turbo 流响应。
如果我理解正确，您希望在提交表单后将表单(或只是按钮)返回到其原始状态。
你会用涡轮框架包裹你的表格，就像这样

<%= turbo_frame_tag dom_id(@invitation) do %>
  <%= form_with(...) %>
  <% end %>
<% end %>

然后，就像@stwienert 所说，让您的 Controller 返回 format.turbo_stream为您的表单呈现部分/模板的响应。这是改编自 the Turbo docs 的 turbo_stream 响应示例:

format.turbo_stream do
  render turbo_stream: turbo_stream.replace(@invitation, partial: "your/form",
    locals: { invitation: @invitation }) # or Invitation.new, perhaps
end

目标是让您的 Controller 响应以您的表单的 DOM id 为目标，这样在表单提交时，您的数据会得到适当的处理，然后客户端会收到一个 turbo 流响应，其中包含您希望在 turbo_frame 标记内看到的 HTML。
如果您只想替换按钮，只需将按钮包装在 turbo_frame 中，给它一个唯一的 DOM id，然后将该 ID 传递给 turbo_stream.replace/append/etc，例如 turbo_stream.replace(:button_dom_id_here, partial: ...)