JavaScript 在 Rails 5 应用程序中不起作用

Question

我想使用静态 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>

Answer 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
希望这会有所帮助。

Answer 2

rails-ujs，在 Rails 5 中引入，不是为了使用 jQuery——它是为了摆脱对 jQuery 的依赖而开发的。

见我的detailed answer