barba js v2 重新初始化 main.js 腳本

Question

我正在努力使用 barba js v2。 ajaxtransition 后，我的 main.js 腳本停止工作。 我想以某種方式重新啟動這個腳本......

我有這樣簡單的 barba 過渡->

import barba from "@barba/core"

class Transition {
  constructor() {
    // console.log(barba)
    this.events()
  }

  events() {
    // console.log("events")
    barba.init({
      transitions: [
        {
          name: "default-transition",
          leave() {
            // create your stunning leave animation here
            console.log("leave")
          },
          enter() {
            console.log("enter")
            // create your amazing enter animation here
          }
        }
      ]
    })
  }
}

export default Transition

在</body>標簽的 and 我有

    <script src="js/main-dist.js"></script>
  </body>

在這個 main-dist.js 腳本中，還導入了幾個其他腳本，例如顯示當前日期的 function。

當我第一次 go 到該頁面時，一切正常，但是當我 go 到另一個頁面並返回應顯示當前日期的頁面時，由於腳本未初始化，日期未顯示。 它僅在加載時初始化，而不是在 ajaxload 時初始化。

所以我的障礙是在 ajaxload 上以某種方式重新初始化這個腳本。

Answer 1

我想到了。 我們可以在轉換腳本中使用 barba hook "after" :)

barba.hooks.after(() => {
const bottomDOM = document.getElementsByTagName("body")[0]
const newScript = document.createElement("script")
const oldScript = document.querySelector(".main-script")
newScript.src = "js/main-dist.js"
newScript.className = "main-script"
oldScript.remove()
bottomDOM.appendChild(newScript)
})

我在DOM的末尾有一個<script class="main-script" src="js/main-dist.js"></script> ，並使用 barba.hook 將其刪除，然后再次添加