Как очистить события и прикрепленные объекты от элементов DOM до того, как Intercooler. JS удалит их? - PullRequest
Новая
       33

Как очистить события и прикрепленные объекты от элементов DOM до того, как Intercooler. JS удалит их?

0 голосов
/ 01 апреля 2020

У меня есть стати c серверная форма, созданная в Laravel, к которой я пытаюсь добавить Intercooler. js. В этой форме я применяю маски ввода к некоторым текстовым полям, используя библиотеку javascript. Без Intercooler после отправки формы страница перенаправляется, и все объекты DOM с этой страницы уничтожаются браузером, поэтому мне не нужно заботиться об очистке.

С Intercooler. js и другими фреймворками перезагрузка страницы отсутствует. Вместо этого содержимое страницы изменяется и объекты DOM удаляются со страницы, но, поскольку они все еще могут быть присоединены к другим объектам и событиям, они все равно могут находиться в памяти.

Поэтому мой вопрос: где подключить мой код очистки в Intercooler. js? Я понимаю, что Intercooler.ready (function (elt)) существует, но, согласно документации, я получаю только добавляемые новые элементы, а не старые. Это не дает мне возможности очистить все, что связано с удаляемыми элементами.

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

1 Ответ

0 голосов
/ 02 апреля 2020

Я спрашивал об этом в сообществе Gitter. Чтобы очистить код перед удалением элемента, вы должны прослушать событие beforeSwap.i c. Чтобы упростить его использование, я создаю функцию, вдохновленную тем, как турболинки, стимулы и неполисты справляются с этой ситуацией. 

const compiler = function(selector, fn) {
  Intercooler.ready(function(elt) {
    let cleanupFn;
    const $el = $(elt).find(selector);

    if ($el.length > 0) {
      cleanupFn = fn($el);
    }

    // Cleanup
    $(document).on("beforeSwap.ic", function(e) {
      const el = e.target;

      //Check if the element selected is inside the element being swapped
      if ($(el).find(selector).length > 0) {
        if (cleanupFn) cleanupFn();
      }
    });
  });
};

export default compiler;

И вот пример, использующий ее: 

compiler("form.userForm", elt => {
    const im = new Inputmask("999.999.999-99");
    const inputCpf = $("input[name=cpf]")[0];
    im.mask(inputCpf);

    return () => {
      if (inputCpf.inputmask) inputCpf.inputmask.remove();
    };
  });

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

Для очистки вы возвращаете функцию из обратного вызова, которая будет вызываться до удаления выбранного элемента.

...