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), но, похоже, этого еще не произошло.