Rails 如果我返回一页,则重复 Webpacker 包(OwlCarousel、DataTables)
Rails repeats Webpacker packages if I go back one page (OwlCarousel, DataTables)
我有一个 Rails 应用程序,如果我返回到应该呈现它们的页面,它会重复包。
例如,我的带有两张图片的 OwlCarousel 会相乘,并将轮播导航叠加在前一张的顶部。
#app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>CRISPR Citrus</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
#app/javascript/packs/application.js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
require("jquery");
import '@popperjs/core'
//Owl Carousel
import "../js/owlcarousel"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
#app/javascript/js/owlcarousel.js
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';
import "owl.carousel/dist/assets/owl.theme.default.min.css"
$( document ).on('turbolinks:load', function() {
$(function () {
$('.owl-carousel').owlCarousel(
{
items: 1,
loop: true,
autoplay: true
}
);
});
})
#owl carousel is simply called like this:
<div class="owl-carousel owl-theme owl-theme-dark">
<%= image_tag "tmp/test_genotyping.png", alt:"", width:""%>
<%= image_tag "tmp/test_genotyping.png", alt:"", width:""%>
</div>
我认为 OwlCarousel 可能有一种方法可以在重新加载之前自行销毁,我可以将其添加到 owlcarousel.js
中,但我认为这将是一种“修补”持续问题的方法。这是应该发生的吗?
问题持续存在
如果以后有人阅读 post,这就是我找到的解决方案。
只需添加:
#in app/views/layouts/application.html.erb
<head>
...
<meta name="turbolinks-cache-control" content="no-cache">
...
</head>
我无法让它对特定视图起作用,所以我只是对应用程序中的每个视图都这样做了。如果有人知道如何在视图中直接实现它,我很感兴趣。
我有一个 Rails 应用程序,如果我返回到应该呈现它们的页面,它会重复包。 例如,我的带有两张图片的 OwlCarousel 会相乘,并将轮播导航叠加在前一张的顶部。
#app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>CRISPR Citrus</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
#app/javascript/packs/application.js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
require("jquery");
import '@popperjs/core'
//Owl Carousel
import "../js/owlcarousel"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
#app/javascript/js/owlcarousel.js
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';
import "owl.carousel/dist/assets/owl.theme.default.min.css"
$( document ).on('turbolinks:load', function() {
$(function () {
$('.owl-carousel').owlCarousel(
{
items: 1,
loop: true,
autoplay: true
}
);
});
})
#owl carousel is simply called like this:
<div class="owl-carousel owl-theme owl-theme-dark">
<%= image_tag "tmp/test_genotyping.png", alt:"", width:""%>
<%= image_tag "tmp/test_genotyping.png", alt:"", width:""%>
</div>
我认为 OwlCarousel 可能有一种方法可以在重新加载之前自行销毁,我可以将其添加到 owlcarousel.js
中,但我认为这将是一种“修补”持续问题的方法。这是应该发生的吗?
问题持续存在
如果以后有人阅读 post,这就是我找到的解决方案。
只需添加:
#in app/views/layouts/application.html.erb
<head>
...
<meta name="turbolinks-cache-control" content="no-cache">
...
</head>
我无法让它对特定视图起作用,所以我只是对应用程序中的每个视图都这样做了。如果有人知道如何在视图中直接实现它,我很感兴趣。