javascript - Rails 应用程序 JavaScript 放置在 application.js 中时不起作用

Question

我有一个 Rails 应用程序。当 JavaScript 包含在脚本标记的 index.html.erb View 中时，它可以完美地工作。当我将 JavaScript 放在 application.js 文件中时，它根本不起作用。

这是我的整个 application.js 文件。此代码不起作用:

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .


var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}

当包含在实际 View 中的脚本标记中时，完全相同的代码可以完美地工作:

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}

</script>

有人可以帮我弄清楚为什么会发生这种情况吗？谢谢

Answer 1

您的代码未运行，因为它未包含在已编译的 application.js 中。您可以通过在浏览器中查看 JavaScript 文件的源代码来验证这一点。

您需要添加require_self到 sprocket list ，它注入(inject)文件本身的内容:

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_self
//= require_tree .

您只需对主“ list ”文件执行此操作，因为 require_tree . 所需的文件当然包括在内。

参见:
-The Assets Pipeline - 2.4 Manifest Files and Directives