[英]Stimulus Controllers Not Functioning At All In Rails 7 App
我真的很難在我正在開發的 Rails 7 應用程序中將 Stimulus 控制器設置為 function,我將不勝感激任何人可能提供的幫助。 我一直在旋轉我的輪子。
我的應用程序.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails";
import "controllers";
import 'bootstrap';
我將 Stimulus 固定在 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 "jquery", to: "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js"
pin_all_from "app/javascript/controllers", under: "controllers"
我沒有觸及 javascript/controllers/application.js 或 index.js 文件。
我的刺激 Controller (ingredients-controller.js):
import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
connect () {
console.log('HELLOOO!!!!');
}
addIngredients(event) {
event.preventDefault();
alert('test');
}
}
在我下面的視圖中連接了<div>
。 我現在正在嘗試的是讓<button>
元素進入 preventDefault() 並進行測試警報。 我無法從上面的 Stimulus Controller 得到任何回應。
<div data-controller="ingredients">
<turbo-frame id=<%= f.field_id(:ingredents) %>>
<h2>Add Ingredients</h2>
<%# Selection section %>
<div>
<h6>Spirits</h6>
<%= f.collection_select :spirit_id, Spirit.all, :id, :spirit_type, {}, { :size => "5", :multiple => true } %>
<h6>Mixers</h6>
<%= f.collection_select :mixer_id, Mixer.all, :id, :mixer_type, {}, { :size => "5", :multiple => true } %>
<h6>Garnishes</h6>
<%= f.collection_select :garnish_id, Garnish.all, :id, :garnish_type, {}, { :size => "5", :multiple => true } %>
</div>
<%# Selected Ingredients %>
</turbo-frame>
<button data-action="click->ingredients#addIngredients">Add Ingredients</button>
</div>
如果有人知道我在這里遺漏了什么,將不勝感激! 謝謝你!
我有一個類似的問題(盡管使用 JS 捆綁器),我通過手動安裝 Stimulus 解決了它。 您可以在此處找到說明: https://github.com/hotwired/stimulus-rails
您可能需要先運行rails assets:clobber
來反編譯您已經編譯的所有資產,在您完成 Stimulus 的手動安裝之后,也許您應該在另一個終端選項卡中運行yarn build --watch
(與運行 rails s 的方式相同) )
所以步驟:
運行rails assets:clobber
將stimulus-rails
gem 添加到您的 Gemfile 中: gem 'stimulus-rails'
運行./bin/bundle install
按照https://github.com/hotwired/stimulus-rails中的手動安裝說明(在子標題“With import map”下)進行操作。
在附加選項卡中運行yarn build --watch
測試你的刺激 controller
希望能幫助到你!
在我的例子中,我必須手動編輯我的app/javascript/controllers/index.js
來注冊 controller。
例如,在rails g component dropdown
之后,我需要按如下方式編輯index.js
(評論中的命令./bin/rails stimulus:manifest:update
沒有正確更新文件...)
// app/javascript/controllers/index.js
// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName
import { application } from "./application"
import DropdownController from "../../components/dropdown_component/dropdown_component_controller"
application.register("dropdown", DropdownController)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.