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

【问题标题】：How to call a function from ruby-on-rails (HTML)?如何从 ruby-on-rails (HTML) 调用函数？
【发布时间】：2021-09-19 02:12:42
【问题描述】：

让，我有一个按钮：

<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";
            }
        });
    }
}

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

【问题讨论】：

Ruby 运行的轨道不是在服务器上吗？
@Teemu 是的！它是..
然后您必须提交表单或发送 AJAX 请求、单击链接等。
这能回答你的问题吗？ execute erb function only on onclick event
@Teemu 我有一个按钮。如果我单击该按钮，则会显示一个 div 类。如果我单击该按钮，则该 div 类将被折叠。如果你看我的JS代码比，你可能明白...

标签： javascript html ruby-on-rails function

【解决方案1】：

对于新的 Rails 应用程序，JavaScript 资产由 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。

【讨论】：