如何在带有 Turbo 的 Rails 中使用 button_to 调用确认提示

Question

以前在 Rails 中使用 button_to 标签时，可以使用这样的确认对话框

<%= button_to 'Destroy', @post, method: :delete, data: { confirm: 'Are you sure?' } %>

data: { confirm: 'Are you sure?' } 是 @rails/ujs 库在后台使用的 Rails 魔术数据属性

在 Rails 7 之后，此库不再默认启用。而不是这个 Rails 使用 Turbo 库

现在这段代码不起作用

官方Rails docs和Turbo handbook没有信息

我尝试了什么

<%= button_to 'Destroy', @post, method: :delete, data: { turbo_confirm: 'Are you sure?' } %>
<%= button_to 'Destroy', @post, method: :delete, data: { 'turbo-confirm': 'Are you sure?' } %>

但是没有结果

我在 SO 上没有找到任何解决方案，但在 Hotwire forum 上找到了。此解决方案具有刺激作用。我只是稍微改进一下

<%= form_with model: @post, method: :delete, data: { controller:  'confirmation', message: 'Are you sure?', action: 'submit->confirmation#confirm' } do |f| %>
  <%= f.submit 'Destroy' %>
<% end %>

// app/javascript/confirmation_controller.js
import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  confirm(event) {
    if (!(window.confirm(this.element.dataset.message))) {
      event.preventDefault()
    }
  }
}

它可以工作，但它很困难，而且看起来很丑，而且我们习惯了 Rails 很酷

Answer 1

在没有 rails-ujs 的带有 Turbo 的 Rails 中调用带有button_to 的确认弹出窗口，我们需要使用这样的代码

<%= button_to 'Destroy', @post, method: :delete, form: { data: { turbo_confirm: 'Are you sure?' } } %>

或

<%= button_to 'Destroy', @post, method: :delete, form: { data: { 'turbo-confirm': 'Are you sure?' } } %>

两者都生成data-turbo-confirm属性

所以我们需要添加这个属性，而不是提交按钮（就像在 rails-ujs 中一样），而是 directly to form 包含这个按钮（让我提醒你这个标签会生成一个带有按钮的表单）

Answer 2

我不完全理解这一点，但以下内容对我有用

<%= button_to post_path(post), method: :delete, form: { data: { turbo_confirm: 'Are you sure?' } } do %>

an svg which shows a trash can

<% end %>.

我也没有任何看起来像 OP 的 confirmation_controller

Answer 3

这在7.0.3有点复杂，如果是使用turbo的页面看起来是这样的：

  <%= button_to "Delete",
                  user_path(user),
                  method: :delete,
                  class: "button tight danger",
                  form: { 
                   data: { 
                     turbo_confirm: "Are you sure you want delete?"
                   }
                  } %>

这形成了一个小表格。现在，如果您使用的是 turbo，但不在该特定页面上，您将不再从旧的 rails ujs 获得简单的comfirm: 'message'。相反，您必须使用刺激控制器。

# app/javascript/controllers/confirmation_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { message: String };

  confirm(event) {
    if (!(window.confirm(this.messageValue))) {
      event.preventDefault();
      event.stopImmediatePropagation();
    };
  };
}

然后

# app/javascript/controllers/index.js
import ConfirmationController from "./confirmation_controller"
application.register("confirmation", ConfirmationController)

然后

    <%= button_to "Delete",
                  user_path(user),
                  method: :delete,
                  class: "button danger",
                  form: {
                    data: {
                      turbo: false,
                      controller: "confirmation",
                      action: 'submit->confirmation#confirm',
                      confirmation_message_value: "Are you sure you want to delete?",
                    }
                  } %>

删除功能真是太可惜了，但如果你想使用 hotwire，你需要承诺完全支持整个生态系统。