如何将确认 addeventlistener 添加到 rails 中的不同视图页面

Posted 2023-02-15

【中文标题】如何将确认 addeventlistener 添加到 rails 中的不同视图页面

【英文标题】：How to add confirm addeventlistener to different view pages in rails

【发布时间】：2022-01-15 11:45:21

【问题描述】：

我有两种不同的观点：edit.html.erb 和 create.html.erb 我想在两个页面上单击复选框时添加类似的功能，但希望避免在两个文件中编写冗余代码：

目前我在这两个文件中都在做什么： 在 create.html.erb

<script>
    function onclick (event) 
        var message = 'Are you sure ?';
        confirm(message) || event.preventDefault();
        
    var elem = document.getElementById('create');
    elem.addEventListener('click', onclick);
</script>

在edit.html.erb中

<script>
    function onclick (event) 
        var message = 'Are you sure ?';
        confirm(message) || event.preventDefault();
        
    var elem = document.getElementById('edit');
    elem.addEventListener('click', onclick);
</script>

理想情况下，我希望有一个 js 文件，在单击创建或编辑时可以捕获这两个事件，而不是在两个文件上单独编写此方法。在这里做 DRY 的好方法是什么。

【问题讨论】：

这不是一个链接，而是一个复选框。

【参考方案1】：

我会像 Rails UJS 那样做——通过添加一个事件侦听器来定位具有data-confirm 属性的元素：

function handleConfirm(e)
  if (!event.target.matches('[data-confirm]')) return; ;
  const attr = e.target.dataset.confirm;
  const message = attr.length > 0 ? attr : 'Are you sure ?';
  window.confirm(message) || e.preventDefault();


document.addEventListener('click', handleConfirm);

<button>No confirmation</button>
<button data-confirm>Standard message</button>
<button data-confirm="REALLY???!!">A button with a custom text</button>

【讨论】：

这个 sn-p 可能无法在某些浏览器上运行，因为 sn-ps 在跨域 iframe 中运行。

一般来说，如果你想快速提高你的 JS 技能，那么就不要再使用 ID 了——我一直不明白为什么我们把初学者当成死胡同。使用基于类和数据/属性的选择器来创建可用于增强任何内容的可重复行为。内联 JS（和内联脚本标签）也是一个类似的拐杖。

我正在使用 webpack。我所做的是javascript_pack_tag <file_name> 并将代码移动到放入 packs/.js 的 js 文件中，最终将有助于将更多功能扩展到页面。

检查你的包中是否还没有import Rails from "@rails/ujs"。它默认包含在 Rails 7 之前，并且已经有一个确认处理程序，以便您加倍。