如何从ruby-on-rails (HTML)调用函数？

Question

让我有一个按钮：

<button type="button" onclick = "myfunction()" class="collapsible">Expand content</button>

并且，我有一个JavaScript函数：

function collapse() {
    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
                content.style.display = "none";
            } else {
                content.style.display = "block";
            }
        });
    }
}

通常，我们使用onclick在HTML中调用JavaScript函数。如果是Ruby-on-rails呢？我注意到我不能在Ruby-on-rails中以这种方式调用函数。如何从ruby-on-rails (HTML)调用函数？

​

​

​

​

Answer 1

对于新的Rails应用程序，JavaScripts资产由Webpack处理(通过Webpacker gem)。默认情况下，Webpack将函数隔离在定义该函数的文件中，因此这些函数不会侵犯全局范围(web中的窗口对象)。

如果您希望浏览器能够在单击按钮时运行函数，您有很多选择，在本例中，您使用的是onclick属性，该属性将在全局范围内运行，因此它将尝试在窗口对象中执行函数。

因为你的函数实际上是孤立的，所以浏览器不能调用它，所以一个解决方案是使函数全局而不是孤立。

这样做，而不是这样做：

function collapse() {
    ...
}

您可以将该函数定义为：

window.collapse = function() {
    ...
}

这样，该函数将在全局范围内可用，您可以从任何地方调用它。

虽然现在我更好地阅读了您的代码，但您有一个奇怪的概念组合，您有onclick="myFunction()"，但您没有在任何地方定义myFunction，然后在collapse函数中，您向按钮添加了eventlistener……再次？问题似乎不在于按钮中的onclick，而是collapse函数从未被调用来实际附加事件侦听器。

我会这样做：

function collapse() {
    ...
}

collapse() // call the function so it attaches the event listeners

然后你就不需要在你的按钮上使用onclick了。