回上一頁時，Rails 6 Turbolink問題

Question

我正在使用Rails 6和Bulma輪播擴展程序，並且在回退包含js代碼的頁面時遇到問題

我的app/javascripts/packs/application.js

require("turbolinks").start();
window.BulmaCarousel = require('bulma-extensions/bulma-carousel/dist/js/bulma-carousel');

我的HTML

<div class="hero-carousel" id="carousel-photo"></div>

<script>
  BulmaCarousel.attach('#carousel-photo', {
    slidesToScroll: 1,
    slidesToShow: 1
  })
</script>

如果刷新瀏覽器，或者第一次訪問該頁面，我的bulma carousel可以正常工作。 但是，當我轉到其他頁面然后又翻回該頁面時，它將出錯。 如何在turbolinks onload上附加這段JS代碼

Answer 1

嘗試turbolinks:before-cache

$(document).on("turbolinks:before-cache", function() {
  BulmaCarousel.attach('#carousel-photo', {
   slidesToScroll: 1,
   slidesToShow: 1
  })
});


 $(document).on("turbolinks:load", function() {
  BulmaCarousel.attach('#carousel-photo', {
   slidesToScroll: 1,
   slidesToShow: 1
  })
});

將兩者都添加到application.js文件中，而不是將其添加到腳本標簽中