6

我创建了新的 rails 7 项目rails new my_project，但在包含要由 rails 处理的自定义 JS 文件时遇到问题。

我的“javascript/application.js”

import "@hotwired/turbo-rails"
import "controllers"

import "chartkick"
import "Chart.bundle"
import "custom/uni_toggle"

我的自定义 JS 文件：“javascript/custom/uni_toggle.js”

function uniToggleShow() {
    document.querySelectorAll(".uni-toggle").forEach(e => e.classList.remove("hidden"))
}

function uniToggleHide() {
    console.log("uni toggle hide")
    document.querySelectorAll(".uni-toggle").forEach(e => e.classList.add("hidden"))
}

window.uniToggleShow = uniToggleShow
window.uniToggleHide = uniToggleHide

我在我的布局中使用<%= javascript_importmap_tags %>

和我的“confing/importmap.rb”

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"
4

2 回答 2

8

看完 DHH视频后，我找到了最后一块拼图。

为了使我的自定义 JS 代码正常工作，我只是将这一行添加到“confing/importmap.rb”

pin_all_from "app/javascript/custom", under: "custom"
于 2022-01-03T21:16:03.003 回答
0

在我的 Rails 7 应用程序中添加自定义 JS 文件时也遇到了问题。我什至关注了 DHH 视频 --> https://www.youtube.com/watch?v=PtxZvFnL2i0但仍然面临困难。以下步骤对我有用：

  1. 转到 config/importmap.rb 并添加以下内容：pin_all_from "app/javascript/custom", under: "custom"
  2. 转到 app/javascript/application.js 文件并添加以下内容： import "custom/main"
  3. 在“app/javascript”目录中，添加“自定义”文件夹。
  4. 在“app/javascript/custom”目录中添加您的自定义 js 文件“main.js”。
  5. 在终端中运行：rails assets:precompile
  6. 启动您的 Rails 服务器。瞧
于 2022-03-01T03:33:17.277 回答