刺激控制器在 Rails 7 应用程序中根本无法运行

我真的很难让 Stimulus 控制器在我正在开发的 Rails 7 应用程序中运行，并且非常感谢任何人可能提供的帮助。我一直在旋转我的轮子。

我的应用程序.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';

我将刺激固定在 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/[email protected] /cdn-cgi/l/email-protection/dist/jquery.js"
pin_all_from "app/javascript/controllers", under: "controllers"

我还没有触及 javascript/controllers/application.js 或 index.js 文件。

我的刺激控制器（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() 并执行测试警报。我无法从上面的刺激控制器得到任何响应。

<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 https://github.com/hotwired/stimulus-rails

您可能需要先运行rails assets:clobber反编译所有已编译的资源 完成 Stimulus 的手动安装后，也许您应该运行yarn build --watch在另一个终端选项卡中（与运行 Rails 的方式相同）

那么步骤：

1. run rails assets:clobber

2. Add the stimulus-railsgem 到您的 Gemfile：gem 'stimulus-rails'

3. Run ./bin/bundle install

4. 按照手动安装说明进行操作（在“使用导入地图”子标题下）https://github.com/hotwired/stimulus-rails https://github.com/hotwired/stimulus-rails.

5. Run yarn build --watch在附加选项卡中

6. 测试您的刺激控制器

希望能帮助到你！