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，尝试添加带有class的控制器作为刺激…

现在我移除了涡轮轨道，刺激等-但仍然没有。

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 %>

<<h3>不工作/h3>

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

添加turbo_method: :get修复

真的不行

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

但是很容易修复:

// app/javascript/application.js
document.addEventListener("click", event => {
const element = event.target.closest("[data-confirm]")
if (element && !confirm(element.dataset.confirm)) {
event.preventDefault()
}
})

---

data-disable-with

使用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 %>

Answer 2

我不喜欢带有确认对话框的魔法链接或一些特殊的HTTP动词

我认为链接必须只是链接

如果你想要一些特殊的功能-使用表单代替

<%= button_to 'Some text', some_path, method: :get, form: { data: { turbo_confirm: 'Are you sure?' } } %>

(需要为包含此按钮的表单添加data-attribute)