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可以正常工作。但是，当我转到其他页面然后又翻回该页面时，它将出错。如何将这段JS代码附加到turbolinks onload

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文件中，而不是将其添加到脚本标签中

回上一页时，Rails 6 Turbolink问题

1 个答案: