![](/img/trans.png)
[英]How to use and load JS helpers in Stimulus controllers in Rails 7?
[英]Use Import Maps and Stimulus with Rails 6
我目前使用的是 Rails 6.0.4,我想使用 Stimulus 來構建一個新頁面。 在升級到 Rails 7 之前還有很多工作要做,所以如果可能的話,我想在 Rails 6 中使用 importmaps 和 stimulus。 但到目前為止,我還沒有能夠讓刺激 controller 發揮作用。 我遵循了以下步驟:
gem 'importmap-rails'
gem 'stimulus-rails'
rails importmap:install
這給了我config/importmap.rb
和app/javascript/application.js
,它們在配置文件中被固定為“應用程序”。
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
這似乎有效,當我呈現頁面時它給了我以下導入 map:
{
"imports": {
"application": "/assets/application-920fceca960b509c1e98c9b27d167fa368d4b588ceb1be42d1667552714f94d5.js"
}
}
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
沒有被預編譯:
由於這個問題,我們使用的是 sprockets 的第 3 版,升級到第 4 版也需要一些時間。 因此,我更新了現有的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']
這解決了問題,並在渲染頁面上為我提供了以下導入 map:
{
"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"
}
}
我更改了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
為我解決了這個問題。 抱歉,我不記得是哪一個成功了,因為我使用的是無能的狗方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.