Rails 6中如何在erb文件内调用自定义JavaScript函数？

我太懂这种“这么简单的事怎么这么绕”的挫败感了！Rails 6换了Webpack来管理JS，和旧版本的asset pipeline逻辑不一样，刚上手确实容易懵。别慌，我给你一套极简的方案，完全不用外部库，几步就能搞定：

首先在app/javascript/packs/目录下新建一个文件，比如custom_functions.js（packs是Webpack的入口目录，Rails会自动识别这里的文件），然后写你的函数：

// app/javascript/packs/custom_functions.js
function sayHello() {
  console.log("按钮被点击啦！");
  alert("这是我自己写的JS函数😎");
}

// 关键：把函数挂载到window对象上
// Webpack默认会把代码封装在模块里，不暴露到全局，所以必须显式挂载才能在erb里调用
window.sayHello = sayHello;

打开app/views/layouts/application.html.erb，在</body>标签的上方（确保JS在DOM加载后引入）加上这行：

<%= javascript_pack_tag 'custom_functions' %>

这一步是告诉Rails把你的自定义JS打包并加载到页面里。

现在回到你的erb视图文件，直接给按钮加点击事件就行：

<button onclick="sayHello()">点我触发自定义函数</button>

进阶：用事件监听替代内联onclick（更符合现代JS规范） #

如果你不想用内联的onclick，可以改成事件监听的写法，更优雅：
先修改你的custom_functions.js：

// app/javascript/packs/custom_functions.js
function sayHello() {
  console.log("按钮被点击啦！");
  alert("这是我自己写的JS函数😎");
}

// 页面加载完成后，给指定按钮绑定点击事件
document.addEventListener('DOMContentLoaded', function() {
  // 找到页面上id为"hello-button"的按钮
  const helloButton = document.getElementById('hello-button');
  if (helloButton) {
    helloButton.addEventListener('click', sayHello);
  }
});

然后erb里的按钮加上id：

<button id="hello-button">点我触发自定义函数</button>

这样就搞定了！核心就是把你的函数暴露到全局window对象，让erb能访问到，剩下的就是常规的引入和调用，完全不用复杂的配置。

内容的提问来源于stack exchange，提问作者Andrew Richards