我目前在 Rails 6.0.4 上,我想使用 Stimulus 来构建一个新页面。在升级到 Rails 7 之前还有很多工作要做,所以如果可能的话,我想在 Rails 6 中使用 importmaps 和刺激。但到目前为止,我还无法让刺激 Controller 工作。我按照以下步骤操作:
1. 更新 Gemfile 和包:
gem 'importmap-rails'
gem 'stimulus-rails'
2.运行rails importmap:install
这给了我
config/importmap.rb
, 和 app/javascript/application.js
,在配置文件中被固定为“应用程序”。3.重命名当前
application.js
文件 我的当前
application.js
在里面 app/assets/application.js.coffee
,所以我将其重命名为 old_application.js.coffee
暂且更新application.html.haml
到以下:= javascript_include_tag "old_application", defer: true
= javascript_importmap_tags
这似乎有效,当我渲染页面时它给了我以下导入映射:{
"imports": {
"application": "/assets/application-920fceca960b509c1e98c9b27d167fa368d4b588ceb1be42d1667552714f94d5.js"
}
}
4.运行rails stimulus:install
这给了我
app/javascript/controllers
带有 index.js
的文件夹, application.js
和 hello_controller.js
里面。它还更新了
config/importmap.rb
到以下:pin "application", 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"
...和我的app/javascript/application.js
到以下:import "controllers"
然后这给了我一个错误,说
controllers/hello_controller.js
尚未预编译:5.更新 Assets 路径和预编译文件
我们正在使用 sprockets 的第 3 版,升级到第 4 版也需要一些时间,因为 this issue .所以我更新了现有的
initializers/assets.rb
文件以包含新的 javascript 文件夹和文件:Rails.application.config.assets.paths << Rails.root.join('app', 'javascript', 'controllers')
Rails.application.config.assets.precompile += ['application.js', 'controllers/index.js', 'controllers/application.js', 'controllers/hello_controller.js']
这解决了问题,并在渲染页面上为我提供了以下导入映射:{
"imports": {
"application": "/assets/application-920fceca960b509c1e98c9b27d167fa368d4b588ceb1be42d1667552714f94d5.js",
"@hotwired/stimulus": "/assets/stimulus.min-c5a29ae8ade968ede2149a7e76a29d0756a87cef66959113681098e5923ba26b.js",
"@hotwired/stimulus-loading": "/assets/stimulus-loading-6b29b7e0382bd421ac62df99b46f45072fd3962208fbf0b2522041b4d037bbd9.js",
"controllers/hello_controller": "/assets/hello_controller-8cddac086717993eeda2cc8af3be73bc3a6ecfb07212600aeed8ce8122fffa34.js",
"controllers": "/assets/index-7445df4dc00776a5e3496034da4bc5906891c342c89c0e6a7775b1498b8222d8.js",
"controllers/application": "/assets/application-5703baa647baaa5a3da21d4e61aa5686824d0e0ab82c2ba11f5c963cc8414a8f.js"
}
}
6. 使用警报 测试刺激 Controller 我改了
hello_controller.js
在连接时显示警报:import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
alert('Hello World!')
}
}
但是当我将它附加到一个带有 data-controller="hello"
的元素时我没有看到任何东西,这表明没有正确加载刺激。这是部分内容:
.home-container{data: { controller: 'hello' }}
%section
.container
这给了我这个HTML:<div class="home-container" data-controller="hello">
<section>
<div class="container">
</div>
</section>
<div>
谁能建议我可能会错过什么?如果我在 Rails 7 上启动一个新的 Rails 应用程序并像这样设置所有内容,它就可以正常工作。
最佳答案
我遇到了同样的问题。运行rails assets:clean
和 rails assets:clobber
为我解决了这个问题。抱歉,我不记得是哪一个成功了,因为我正在使用无能的狗方法。
关于javascript - 在 Rails 6 中使用导入 map 和刺激,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70959924/