Storybook: @ storybook / html 5.0.1 не может запускать скрипты при загрузке истории, иначе DOMContentLoaded больше не помогает

Созданный на 15 мар. 2019 · 6Комментарии · Источник: storybookjs/storybook

Привет народ! Итак, вот моя ситуация: некоторые из моих компонентов требуют javascript. Я могу успешно вызвать файл javascript в preview-head.html но его инициализация является проблемой.

До v5.0.1 у меня было:

document.addEventListener("DOMContentLoaded", function(event) {
        /* The stuff I needed to initialise */
    }, false);

и это сработало, но теперь это не так.

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

Любая помощь будет оценена.

core has workaround question / support

Источник

BennyZ28

Самый полезный комментарий

@ BennyZ28 какое было решение?

Обходной путь слишком сложен, почему бы в сборнике рассказов не обеспечить обратный вызов, который вызывается только после того, как история добавляется в дерево доменов?

vipcxj 4 апр. 2020

👍17

Все 6 Комментарий

Неважно, решено

BennyZ28 15 мар. 2019

@ BennyZ28 какое было решение?

shilman 15 мар. 2019

👍1

@shilman На самом деле я не решил это, я думал, что у меня было слишком много часов перед экраном, но я ошибался.

Итак, любая помощь по-прежнему приветствуется!

BennyZ28 15 мар. 2019

Всякий раз, когда "страница" изменяется, старый элемент div#root внутри iframe удаляется и добавляется новый. Вы можете использовать эту функцию и объединить ее с MutationObserver чтобы запускать функцию при каждом изменении страницы.

Внутри вашего preview-head.html вы можете добавить:

function runOnInit() {
  console.log('Init')
}
function runOnPageChange() {
  console.log('Page has changed!')
}
document.addEventListener('DOMContentLoaded', function() {
  runOnInit();
  const callback = function(mutationsList) {
    for (let i = 0, len = mutationsList.length; i < len; i++) {
      if (mutationsList[i].type == 'childList') {
        runOnPageChange();
        break;
      }
    }
  };

  const observer = new MutationObserver(callback);
  const config = { childList: true, subtree: false };
  observer.observe(document.getElementById('root'), config);
}, false);

Чтобы понять, как работает MutationObserver , обратитесь к документации MDN .