Инициировать событие стимула при добавлении/удалении цели из DOM

У меня есть форма с несколькими страницами, где есть часть, которая отображает содержимое формы для каждой страницы внутри части, которая содержит заголовок, нижний колонтитул, кнопку «Далее».

Мне нужна кнопка «Далее», чтобы динамически реагировать на каждую страницу. Итак, если пользователь просматривает страницу 1 формы, то я проверяю, что поля (цели) на странице 1 не пусты, прежде чем активировать кнопку «Далее», после чего они переходят на страницу 2 и следующий Кнопка должна быть отключена снова, пока все поля/цели на странице 2 не будут заполнены.

Таким образом, контроллер должен иметь возможность запускать функцию каждый раз, когда происходит изменение страницы, что, как я полагал, я мог бы сделать, обнаружив, что определенные цели присутствуют в DOM. Но я не смог найти простой способ сделать это.

Это более или менее урезанная версия того, что у меня есть.

Внешняя обертка:

        <body data-controller="next-button">

    <main>
      <%= turbo_frame_tag :main, do %>
        <%= yield %>
      <% end %>
    </main>

      <%= render partial: 'application/progress_bar' %>
    <% end %>
  </body>

Затем у меня также есть форма рельсов с текстовым полем:

      <%= form.text_field :name, data: { target: "next-button.contactName"}  %>

Это мой контроллер:

      export default class extends Controller {
static targets = ['contactName']

  connect() {
    console.log(this.contactNameTarget);
  }

  contactNameTargetConnected() {
    console.log('foo');
  }

}

Когда страница загружается,console.log(this.contactNameTarget)выводит HTML для contactName, как и ожидалось, ноcontactNameTargetConnected()ничего не делает.

Основываясь на документации стимула , касающейся обратных вызовов жизненного цикла, я ожидаю, что эта функция сработает при загрузке, тем более что она явно может получить доступthis.contactNameTarget

Я также просмотрел опубликованное решение команды стимулов на github , где у них есть пример, который выглядит так, как будто он может решить мою проблему, но опубликованный ими код устарел, и я не смог заставить его работать:

      const event = document.createEvent("CustomEvent")
event.initCustomEvent("inner-connected", true, true, null)
this.element.dispatchEvent(event)
Источник

0 ответов

Другие вопросы по тегам