如何在Rails 7视图上使用自定义JS ?

Question

我正在尝试添加自定义JS到我的Rails 7项目。我遵循了这个StackOverflow答案上的说明。

但是我仍然不能在我的视图中使用自定义JS。

我的main.js:

function sayHi() {
console.log("hi");
}
window.sayHi = sayHi;

这是我的观点(index.html.erb):

<div>
<button type="button" onclick="sayHi()">Click Me!</button>
</div>

当我点击按钮时，在控制台中它只是说:

Uncaught ReferenceError: sayHi is not defined

我真的不知道如何从我的视图访问自定义JS。

这是我上传到DropBox的项目链接。

Answer 1

您需要将函数公开给全局作用域。

window.sayHi = sayHi;

Answer 2

所以我要把这个作为一个完整的答案给任何想要在Rails 7项目中添加javascript的人:

1. 在app/javascript/custom/main.js(或不管你喜欢什么文件名):

   function sayHi() {
   console.log("hi");
   }
   window.sayHi = sayHi;  // You must have this to expose your functions
   

   (或者您可以使用事件处理程序代替)

2. 转到config/importmap.rb，添加以下内容:

   pin_all_from "app/javascript/custom", under: "custom"
   

3. 进入app/javascript/application.js文件，添加如下内容:

   import "custom/main"
   

4. 在终端运行:

   rails assets:precompile
   

5. 启动rails服务器。瞧👍