Barba JS - скрипт, добавленный через ловушку, недоступен, когда новый контейнер входит после перехода страницы

Я использую Barba js и alpine для создания переходов между страницами. Я пытаюсь добавить определенные js-скрипты в контейнер до того, как он перейдет в контейнер, но, похоже, я не понимаю.

Я пытался использовать крючки Barba для добавления сценария, а затем запускать настраиваемое событие при входе, чтобы запустить alpine для запуска кода. Скрипт добавляется и запускается alpine get, но, похоже, не успевает для alpine. Если я добавлю задержку, все будет нормально. Мне было интересно, есть ли способ предварительно загрузить сценарий и прикрепить его к следующему контейнеру перед переходом? Убедиться, что скрипт действительно завершил загрузку перед переходом?

Это то, что я делаю сейчас.

// Function to load scripts for specific partials
function addScripts(container) {
   // add page scripts
   // get all scripts to load
   var allScripts = container.querySelectorAll('.barba_load_script'), 
       i;
   for (i = 0; i < allScripts.length; i++) {
       console.log("Loading Script: " + allScripts[i].getAttribute('data-script-src'));
       let script = document.createElement('script');
       script.src = allScripts[i].getAttribute('data-script-src');
       container.appendChild(script);
   }
}

barba.init({
   transitions: [{
   async leave(data) {
      await pageTransitionIn()
      data.current.container.remove();
   },
   async enter(data) {
      // await delay(1000); // adding this gives it enough time to work, it's obviously bad practice
      await pageTransitionOut(data.next.container)
   },
   async once(data) {
      // await delay(1000);
      await contentAnimation(data.next.container);
   }
}]

barba.hooks.before((data) => {
   // add page scripts
   addScripts(data.next.container);
});
barba.hooks.beforeOnce((data) => {
   // add page scripts
   addScripts(data.next.container);
});

Мой html-код выглядит так

<div class="example" id="example" @barbaload.window="example()"></div>
<div class="hidden barba_load_script" data-script-src="example.js"></div>

вызов example() запускает некоторый код, который отлично работает, если включен в качестве обычного тега скрипта при загрузке первой страницы, но если он находится на странице, на которую выполняется переход, тогда он вообще не работает. Загрузка с помощью этого метода работает при каждой загрузке страницы, но только с добавленной вручную задержкой, что не является решением. Код довольно громоздкий (в данном случае это экспортированный код анимации Lottie), поэтому я действительно надеялся, что смогу добавить его только на те страницы, которые в нем нуждаются. Я видел, что над этим работают (https://github.com/barbajs/barba/issues/485), но, похоже, этого еще не произошло.

0 ответов

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