如何在 Rails 6 中执行自定义 JavaScript 函数

Question

随着 Webpacker 到 Ruby On Rails，我找不到使用 JavaScript 函数的方法。

我有一个名为 app-globals.js 的文件，其中包含要测试的功能：

function alerts() {
  alert("TEST")
}

然后我想在我的一个视图中使用它：

<% = button_tag 'Button', type: 'button', onClick: 'alerts ()'%>

但是当我按下按钮时，浏览器控制台中会显示此错误：

ReferenceError: alerts is not defined

1. 我将app-globals.js 文件放在"app/javascript" 和"app/ javascript/packs/application.js" 我放置了require ("app-globals")。

2. 我将 app-globals.js 移至 "app/javascript/packs" 并从 application.js 中删除了 require ("app-globals")。

无论哪种情况，都会出现错误。

Answer 1

不过，有一个解决方法。你可以：

更改函数签名：

function myFunction() { ... }

到：

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

所以在你的代码中我们可以像下面这样：-

app/javascript/packs/app-globals.js

window.alerts = function() {
    alert ("TEST");
}

然后需要这个文件到 application.js :-

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()

require("@rails/activestorage").start()
require("channels")
require("jquery")

import $ from 'jquery'
window.jQuery = $;
window.$ = $;


require("packs/app-globals") ## require your file