1

我正在使用 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），但这似乎还没有发生。

4

0 回答 0