rails如何给不同的视图页面添加confirm addeventlistener

Question

我有两种不同的看法：edit.html.erb 和 create.html.erb 我想在两个页面上添加类似的功能 onclick 一个复选框，但想避免在两个文件中编写冗余代码：

目前我在这两个文件中所做的事情：在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有什么好方法吗

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

rails如何给不同的视图页面添加confirm addeventlistener

How to add confirm addeventlistener to different view pages in rails

javascript

ruby-on-rails

ruby-on-rails-3