web-dev-qa-db-ja.com

Rails 6でカスタムJavaScript関数を実行する方法

WebpackerがRuby on Railsに）登場したため、JavaScript関数を使用する方法を見つけることができません。

テストする関数を含むapp-globals.jsというファイルがあります。

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

次に、それを私の見解の1つで使用したいと思います。

<% = 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"）を削除しました。

どちらの場合でも、エラーが表示されます。

javascriptruby-on-railswebpacker
6
Johan Donado B.

ただし、回避策があります。あなたはできる：

以下から関数シグネチャを変更します。

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
1
code_aks