JavaScript 在 Rails 5 应用程序中不起作用
Posted
技术标签:
【中文标题】JavaScript 在 Rails 5 应用程序中不起作用【英文标题】:JavaScript not working in rails 5 app 【发布时间】:2018-06-09 02:06:37 【问题描述】:我想使用静态 javascript 文件而不使用我的 rails 应用程序中的 gem。我的application.js
看起来像这样
//= require jquery
//= require bootstrap
//= require owl-carousel
//= require rails-ujs
我必须在 javascript 文件夹中添加所有 Js 文件,而无需使用资产管道使用任何 gem。 The final output that i want。但在我的 Rails 应用程序 javascript is not working or not loading 中。我的application.css.scss
看起来像这样:
@import "bootstrap";
@import "style";
@import "owl-carousel";
还有index.html.erb
的代码
<div class="app_screenshots_slides owl-carousel">
<div class="single-shot">
<%=image_tag("scr-img/1.png", alt: "")%>
</div>
<div class="single-shot">
<%=image_tag("scr-img/2.png", alt: "")%>
</div>
<div class="single-shot">
<%=image_tag("scr-img/3.png", alt: "")%>
</div>
<div class="single-shot">
<%=image_tag("scr-img/4.png", alt: "")%>
</div>
<div class="single-shot">
<%=image_tag("scr-img/1.png", alt: "")%>
</div>
<div class="single-shot">
<%=image_tag("scr-img/3.png", alt: "")%>
</div>
</div>
【问题讨论】:
javascript 无法加载。所以检查控制台是否有错误。然后设置一个断点,因为您没有包含有关此问题的代码 你的application.html.erb
是否包含 javascript_include_tag 'application'
是的,我已经包含了这个
这里是我的 Github repo 和 issue github.com/asdimalix/javascript-test/issues/1的链接
【参考方案1】:
您的所有 javascript 都已实际加载,但问题是您没有初始化 owl carousel 插件。只需添加
$(document).ready(function ()
$(".owl-carousel").owlCarousel();
);
在您的home/index.html.erb
的底部或相关的 js 文件中以使其工作。
编辑 - 修复您当前的设置 问题是您的插件在加载实际 html 之前已初始化。可能的修复是1.change
(function ($)
'use strict';
// :: 1.0 Owl Carousel Active Code
if ($.fn.owlCarousel)
$(".welcome_slides").owlCarousel(
items: 1,
loop: true,
autoplay: true,
smartSpeed: 1500,
nav: true,
navText: ["<i class='pe-7s-angle-left'</i>", "<i class='pe-7s-angle-right'</i>"]
);
$(".app_screenshots_slides").owlCarousel(
items: 1,
loop: true,
autoplay: true,
smartSpeed: 800,
margin: 30,
center: true,
dots: true,
responsive:
0:
items: 1
,
480:
items: 3
,
992:
items: 5
);
)(jQuery)
;
在assets/javascripts/owl-carousel.js
到
$(document).ready(function ()
if ($.fn.owlCarousel)
$(".welcome_slides").owlCarousel(
items: 1,
loop: true,
autoplay: true,
smartSpeed: 1500,
nav: true,
navText: ["<i class='pe-7s-angle-left'</i>", "<i class='pe-7s-angle-right'</i>"]
);
$(".app_screenshots_slides").owlCarousel(
items: 1,
loop: true,
autoplay: true,
smartSpeed: 800,
margin: 30,
center: true,
dots: true,
responsive:
0:
items: 1
,
480:
items: 3
,
992:
items: 5
);
);
2. 将javascript_include_tag
中的application.html.erb
移动到页面底部,就在</body>
之前
3. 将 owl carousel 初始化脚本从 owl-carousel.js
移动到您的 home/index.html.erb
希望这会有所帮助。
【讨论】:
我也在我的 owl carousel js 文件的底部初始化...像这样 见这里github.com/asdimalix/javascript-test/blob/master/app/assets/… 不客气,如果你能接受答案,如果它有帮助,那就太好了。@devdap 只需单击左侧投票图标下方的复选标记。 i.stack.imgur.com/uqJeW.png【参考方案2】:rails-ujs,在 Rails 5 中引入,不是为了使用 jQuery——它是为了摆脱对 jQuery 的依赖而开发的。
见我的detailed answer
【讨论】:
以上是关于JavaScript 在 Rails 5 应用程序中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
stylesheet_pack_tag 在带有 webpacker gem 的 rails 5.1 中找不到 app/javascript/src/application.css
Rails 应用程序中的 Javascript 或 jquery
Rails 5 - Ajax 刷新后重新初始化 Javascript?
Rails 5/6:如何在 webpacker 中包含 JS 函数?
Bootstrap (5) Javascript 在 package.json 修订后不起作用 (Ruby on Rails 6)