重构表单字段和 Stimulus JS，以便不重复：每个表单字段一次数据操作

Question

我有以下表格

<%= 
  form_for(
    model,
    html: {
      :'data-controller' => 'enable-submit-button-if-fields-changed'
    }
  ) do |form|
%>
  <%= form.text_field(:title, :'data-action' => 'input->enable-submit-button-if-fields-changed#enableSubmit') %>
  <%= form.text_area(:description, :'data-action' => 'input->enable-submit-button-if-fields-changed#enableSubmit') %>
  <%= form.file_field(:picture, :'data-action' => 'input->enable-submit-button-if-fields-changed#enableSubmit') %>
  <%= form.check_box(:delete_image, :'data-action' => 'input->enable-submit-button-if-fields-changed#enableSubmit') %>
  <%#= other input fields... %>
<% end %>

和以下 Stimulus JS 控制器

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="enable-submit-button-if-fields-changed"
export default class extends Controller {
  connect() {
    this.element.querySelector('input[type=submit]').disabled = true;
  }

  enableSubmit() {
    this.element.querySelector('input[type=submit]').disabled = false;
  }
}

它们的意思是在输入字段更改时启用提交按钮。

如您在表格中所见，我为每个输入字段添加了一次

:'data-action' => 'input->enable-submit-button-if-fields-changed#enableSubmit'

。

重构的方法是什么，以便不为每个字段重复

:'data-action'

一次，例如只是在表单上声明

:'data-controller' => 'enable-submit-button-if-fields-changed'

并（通过 Stimulus）将其所有内部输入字段设置为 JS-启用更改时的提交按钮？或者，我应该继续为每个字段重复一次

:'data-action'

吗？

Answer 1

您可以只向

form

添加一个事件侦听器，因为

input

事件会冒泡。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event