QuerySelector не работает в Rails Webpacker - PullRequest
Новая
       23

QuerySelector не работает в Rails Webpacker

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

В Webpacker загружено следующее JavaScript: 

'use strict';

(function() {
  alert("This shows up.");
  var someObject = document.querySelectorAll('[data-toggle="thing"]');
})();

Я знаю, что файл загружен в Webpacker правильно и выполняется, потому что я вижу предупреждение This shows up.. Однако когда я go в консоли, someObject является пустым массивом, несмотря на страницу, содержащую объект с атрибутом data-toggle.

Я не вижу никаких ошибок в консоли, чтобы помочь диагностировать проблема.

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

Любая помощь будет принята с благодарностью!

1 Ответ

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

Возможно, вам понадобится обернуть ваш код в обратный вызов прослушивателя событий , который будет выполняться при загрузке DOM . Это может быть в том случае, если ваш скрипт-тег находится в <head>; он выполняется до загрузки остальной части страницы. 

window.addEventListener('DOMContentLoaded', (_event) => {
  let someObject = document.querySelectorAll('[data-toggle="thing"]');
});

Вам также не обязательно заключать код в IIFE (т. е. (function() { })(), поскольку каждый файл в веб-пакете (как правило) обрабатывается (обычно) как модуль со своей областью действия.

...