我真的在为 Rails 的所有新 JS 更改而苦苦挣扎。我正在尝试实现愚蠢的简单滑块脚本,Glide.js
这是我的app/javascripts/packs/front.js
文件:
// Internal
// require("@rails/ujs")
import Glide from '@glidejs/glide'
console.log(Glide);
import Rails from '@rails/ujs'
Rails.start()
require('jquery')
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// Custom
require('./vendor_js/vendor_import.js')
这是我调用 gilder (new_slider.js) 的文件:
// require("./slider.js");
require("./new_slider.js");
require("./mBox.js");
require("./lightbox_script.js");
require("./map.js");
// import lightbox from "packs/custom/lightbox_script.js";
这是new_slider.js
文件:
$(document).on('turbolinks:load', function(){
console.log("new_slider.js is loaded");
var slider = document.querySelector('.glide');
if (slider) {
var glide = new Glide(slider);
console.log("glide is loaded:");
console.log(glide);
glide.mount();
}
});
这是我的哈姆观点:
.glide
.glide__track{"data-glide-el" => "track"}
%ul.glide__slides
%li.glide__slide
%img{:src => asset_path('slider/winter_holidays/1.jpg'), :style => "width:100%"}/
%li.glide__slide
%img{:src => asset_path('slider/winter_holidays/2.jpg'), :style => "width:100%"}/
%li.glide__slide
%img{:src => asset_path('slider/winter_holidays/3.jpg'), :style => "width:100%"}/
%div{"data-glide-el" => "controls"}
%button{"data-glide-dir" => "<<"} start
%button{"data-glide-dir" => ">>"} end
这是我的控制台输出:
ƒ Glide$$1() {
classCallCheck(this, Glide$$1);
return possibleConstructorReturn(this, (Glide$$1.__proto__ || Object.getPrototypeOf(Glide$$1)).apply(this, arguments));
}
new_slider.js:2 new_slider.js is loaded
new_slider.js:6 Uncaught ReferenceError: Glide is not defined
at HTMLDocument.<anonymous> (new_slider.js:6)
at HTMLDocument.dispatch (event.js:328)
at HTMLDocument.elemData.handle (event.js:148)
at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
at r.pageLoaded (turbolinks.js:948)
at turbolinks.js:872
Gilde 显然已加载,因为 console.log(Glide) 提供了输出。new_slider.js
文件是在导入后加载的Gilde
,所以不会有任何冲突。到目前为止我发现的唯一问题是这个,但不幸的是它根本没有帮助。
有人能指出我正确的方向吗?