Rails 7中Rails UJS不触发

Question

我将我的Rails应用程序升级到了Rails 7。我知道在Rails 7中，Turbolinks和Rails UJS实际上被Stimulus和Turbo的Hotwire组合所替代，但我想知道是否仍然可以使用UJS，如果可以，为什么它不起作用？

我未能正常工作的方法如下：

  submit(event) {
    this.errorTarget.classList.add("hidden")
    Rails.fire(this.formTarget, "submit")
    console.log('hi')
  }

控制台日志有效。当我点击一个元素时，使用这段代码可以使它更改，但现在它不再更改。Rails.fire不再触发，检查网站时，日志或网络部分没有错误信息。

我感觉我在这里缺少一些关键的东西，但我不知道是什么。

- sam

Answer 1

要将rails-ujs添加到Rails 7中，您需要执行以下步骤：

1. 将其固定，以便应用程序知道使用哪个包。在bash中输入：

./bin/importmap pin @rails/ujs

现在你的 config/importmap.rb 文件中应该有类似以下的内容：

pin "@rails/ujs", to: "https://ga.jspm.io/npm:@rails/ujs@7.0.1/lib/assets/compiled/rails-ujs.js"

2. 现在将 @rails/ujs 包含到你的 JavaScript 中。在文件 javascript/controllers/application.js 中添加以下代码：

import Rails from '@rails/ujs';

Rails.start();

3. 重新启动您的应用服务器

- Ruslan Valeev

---

你可能希望使用 ./bin/importmap pin @rails/ujs@7 将其固定到版本 7，否则你可能会在当前加载 @rails/ujs@6。 - nyi

如果您不想在生产环境中使用JavaScript CDN，可以执行以下操作：./bin/importmap pin @rails/ujs --download。这将在您的config/importmap.rb文件中添加一个条目，其内容如下：pin "@rails/ujs", to: "@rails--ujs.js"。 - Tedi

目前它确实会引入ujs 7。 - Paul Odeon

Answer 2

问题在于，在Rails 6.x中，表单会自动生成属性data-remote="true"，但是在升级到Rails 7.x后，这种情况不再发生。

为了恢复旧的行为并使您的Rails.fire调用再次起作用，您需要明确地将data-remote="true"添加到表单中。

- coorasse

Answer 3

正如coorasse指出的那样，form_with 以前默认使用 remote: true 来实现。这在 Rails 7.x（或者甚至自从 6.1 版本）中发生了变化。

幸运的是，可以明确地将默认设置改回来，而不必手动调整所有表单。以下是对我有帮助的便捷和简单方法:

config/application.rb

config.action_view.form_with_generates_remote_forms = true

- Flinsch

---

运作得非常顺利 - undefined