Rails 7.0.4 和 link_to 的数据确认不起作用

Question

我最后的机会是 RoR 中最后一个活着的开发人员

互联网最黑暗的角落里的任何东西都不起作用：

<%= link_to 'some-link', '#', data: { confirm:'Are You Sure?') %>;

它生成这个：

<a data-confirm="Are you sure?" href="#">some link</a>

但没有确认对话框。

我尝试了一切 - Turbo_confirm，尝试添加带有刺激类的控制器......但仍然一无所获。

现在我移除了涡轮导轨、刺激装置等——但仍然一无所获。

Answer 1

data-turbo-confirm呈现一个带有给定值的确认对话框。可用于form元素或带有 的链接data-turbo-method。

https://turbo.hotwired.dev/reference/attributes

有效的例子

<%= link_to "GET turbo link", "/",
  data: {
    turbo_method: :get,
    turbo_confirm: "Sure?"
  }
%>

<%= link_to "POST turbo link", "/",
  data: {
    turbo_method: :post,
    turbo_confirm: "Sure?"
  }
%>

<%= button_to "Button", "/",
  data: { turbo_confirm: "Sure?" }
%>

<%= form_with url: "/",
  data: { turbo_confirm: "Sure?" } do |f| %>

  <%= f.submit "Submit" %>
<% end %>

不起作用

<%= link_to "GET link", "/",
  data: { turbo_confirm: "Sure?" }
%>

通过添加修复turbo_method: :get。

@hirowatari编辑：

<%= link_to "GET external link", "http://example.com",
  data: {
    turbo_method: :get,
    turbo_confirm: "Sure?"
  }
%>

外部链接或带有扩展名的链接（除了.html或.php）将被Turbo忽略。我认为这是原因之一data-turbo-confirm，类似的Rails UJS功能最初没有在Turbo中实现。如果您从Rails UJSdata-confirm迁移，那么您最好实现自己的功能，这非常简单，您不必将属性更改为，并且它只需单击即可工作。请参阅下面的示例。data-turbo-confirm

确实不行

<%= link_to "UJS link", "/",
  data: { confirm: "Sure?" }
%>

但很容易修复：

// app/javascript/application.js

// this is now my preferred way of dealing with confirmation dialog
// it is just much simpler than Turbo way
document.addEventListener("click", event => {
  const element = event.target.closest("[data-confirm]")

  if (element && !confirm(element.dataset.confirm)) {
    event.preventDefault()
  }
})

数据禁用与

更新用于data-turbo-submits-with处理此问题。

这个有点复杂，但都是相同的模式，监听事件，检查数据属性，如果是，则执行某些操作。

// app/javascript/application.js

// on form submit
// set `value` if `input`
// set `innerHTML` if `button`
document.addEventListener("turbo:submit-start", event => {
  const element = event.detail.formSubmission.submitter
  if (element.hasAttribute("data-disable-with")) {
    // element.disabled = true // this is done by turbo by default
    if (element instanceof HTMLInputElement) {
      element.value = element.dataset.disableWith
    } else {
      element.innerHTML = element.dataset.disableWith
    }
  }
})

<%= form_with url: "/" do |f| %>
  # <button>
  <%= f.button "Submit", data: { disable_with: "..." } %>
  # <input>
  <%= f.submit "Submit", data: { disable_with: "..." } %>
<% end %>