多单词命名的Stimulus控制器调用失败，求原因解析

Stimulus对控制器的命名有严格的三位一体对应规则，你之前的所有尝试都违反了这个规则，所以才会失败，具体拆解如下：

核心规则 #

Stimulus的控制器命名必须满足三个部分的统一映射：

1. HTML中的引用名：必须用kebab-case（短横线分隔，比如reset-form）
2. 文件名：必须用snake_case（下划线分隔）加上_controller.js后缀（比如reset_form_controller.js）
3. 控制器类名：必须用CamelCase（大驼峰，比如ResetFormController）

你的错误尝试拆解 #

1. 第一种写法：{ controller: "reset_form", action: "turbo:submit-end->reset_form#reset" } + reset_form_controller.js

   • 错误：HTML里的控制器引用用了snake_case（reset_form），应该改为kebab-case的reset-form

2. 第二种写法：{ controller: "reset-form", action: "turbo:submit-end->reset-form#reset" } + reset-form-controller.js

   • 错误：文件名用了kebab-case（reset-form-controller.js），应该改为snake_case的reset_form_controller.js

3. 第三种写法：{ controller: "reset_form", action: "turbo:submit-end->reset-form#reset" } + reset-form_controller.js

   • 错误：HTML引用名用了snake_case，文件名混合了短横线和下划线，同时action里的控制器名和HTML的controller参数不一致

4. 第四种写法：{ controller: "reset-form", action: "turbo:submit-end->reset_form#reset" } + reset-form_controller.js

   • 错误：action里的控制器引用用了snake_case（reset_form），应该和HTML的reset-form保持一致，同时文件名不符合snake_case规范

正确的多单词控制器写法示例 #

• HTML调用：

  { controller: "reset-form", action: "turbo:submit-end->reset-form#reset" }
  

• 文件名：reset_form_controller.js
• 控制器类代码：

  import { Controller } from "@hotwired/stimulus"
  
  export default class extends Controller {
    reset() {
      // 你的重置逻辑
    }
  }
  

这样就能正常识别并运行多单词命名的Stimulus控制器了。

内容的提问来源于stack exchange，提问作者TedTran2019