在Rails 7应用程序中，刺激控制器根本不起作用

Question

我真的很难让刺激控制器在我正在开发的Rails 7应用程序中发挥作用，我希望任何人都能提供帮助。我一直在旋转我的轮子。

我的Application.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/jquery@3.6.0/dist/jquery.js"
pin_all_from "app/javascript/controllers", under: "controllers"

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

我的刺激控制器(成分-控制器. My )：

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>

如果有人知道我在这里错过了什么，我们会非常感激的！谢谢!

Answer 1

我也遇到了一个类似的问题(虽然是JS bundler)，我通过手动安装刺激来解决这个问题。您可以在这里找到说明：https://github.com/hotwired/stimulus-rails

您可能需要首先运行rails assets:clobber来解压缩已经编译的所有资产，在手动安装刺激之后，也许您应该在另一个终端选项卡中运行yarn build --watch (与运行rails的方式一样)。

因此，这些步骤：

运行rails assets:clobber的

gem 'stimulus-rails'：

1. 将stimulus-rails gem添加到Gemfile中

运行./bin/bundle install的

https://github.com/hotwired/stimulus-rails.的

1. 遵循手动安装的说明(在子标题"With import“下)

1. 在附加选项卡

中运行yarn build --watch

1. 测试您的刺激控制器

希望能帮上忙！