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

Question

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

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

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

那我想在我的一个观点中使用它：

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

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

ReferenceError: alerts is not defined

我将 app-globals.js 文件放在 "app/javascript" 中，在 "app/ javascript/packs/application.js" 中我放置了 require ("app-globals").
我将 app-globals.js 移动到 "app/javascript/packs" 并从 application.js.
[= 中删除了要求 ("app-globals") 40=]

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

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

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

How to execute custom javascript functions in Rails 6

javascript

ruby-on-rails

webpacker