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

Question

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

我有一个名为 app-globals.js 的文件，其中包含一个要测试的函数:

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

然后我想在我的一个 View 中使用它:

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

但是当我按下按钮时，这个错误会显示在浏览器控制台中:

ReferenceError:未定义警报

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