代码之家 › 专栏 › 技术社区 › icalvete

Rails 7:如何添加自定义javascript函数?

ruby-on-rails-7 ruby-on-rails javascript

0

icalvete · 技术社区 · 1 年前

我仔细阅读了 How to add custom JS file to new rails 7 project 那篇文章描述了如何做到这一点。我一直在努力,但还是失败了

我的javascript树。自定义文件夹和index.js是我添加的。

.
âââ application.js
âââ controllers
âÂ Â  âââ application.js
âÂ Â  âââ hello_controller.js
âÂ Â  âââ index.js
âââ custom
    âââ index.js

2 directories, 5 files

我的 app/javascript/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "custom"

我的 app/javascript/custom/custom.js

function btn_project_show() {
    alert('culodemono');    
}

我的 config/importmap.rb

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin_all_from "app/javascript/custom", under: "custom"

html源代码顶部(预编译后。 资产/定制/定制-fd29fe543537735de09c23dfa7241cdd8e47c8f9fd71e89211b591fc7c12fd8c.js 完全可以访问)

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Admin</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="csrf-param" content="authenticity_token" />
    <meta name="csrf-token" content="J96RvzdbOjB5WdfZtE0-eFIoJpISdZP3N32YPIiotPmIsTBlGyL69NlqShdPCadKOv4ReV2PFoGdMZ9CH1kxdw" />

    <link rel="stylesheet" href="/assets/application-ed7f657c82113ab3654e0f1c0a9fb78eb9439717ba426d64a05914a481e366bf.css" data-turbo-track="reload" />
    <link rel="stylesheet" href="/assets/vendor-342cc5ede18e0d08cf0a816961342ad3262763c3e440dbabc6bca4f058bbf174.css" data-turbo-track="reload" />
    <script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-dfd93b3092d1d0ff56557294538d069bdbb28977d3987cb39bc0dd892f32fc57.js",
    "@hotwired/stimulus": "/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js",
    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
    "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js",
    "custom": "/assets/custom/index-fd29fe543537735de09c23dfa7241cdd8e47c8f9fd71e89211b591fc7c12fd8c.js""
  }
}</script>
<link rel="modulepreload" href="/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js">
<link rel="modulepreload" href="/assets/turbo.min-dfd93b3092d1d0ff56557294538d069bdbb28977d3987cb39bc0dd892f32fc57.js">
<link rel="modulepreload" href="/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js">
<link rel="modulepreload" href="/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js">
<script src="/assets/es-module-shims.min-4ca9b3dd5e434131e3bb4b0c1d7dff3bfd4035672a5086deec6f73979a49be73.js" async="async" data-turbo-track="reload"></script>
<script type="module">import "application"</script>

我的观点。

<a class="btn" href="javascript: btn_project_show();">

当我点击链接时,我可以在javascript控制台中看到这个错误:

Uncaught ReferenceError: btn_project_show is not defined
    at <anonymous>:1:2
(anonymous) @ VM1642:1

怎么了?

我对javascript的了解相当基础。对我来说,一切都是完美的。

我不想在中创建javascript模块 自定义/index.js 。只是一些自定义函数。

0 回复 | 直到 1 年前