Rails 7中如何将jQuery折扣码校验代码转换为StimulusJS控制器

修改后的视图模板代码 #

移除原有jQuery绑定的script标签，通过Stimulus标准的data属性完成控制器、元素、事件的绑定，不需要依赖id选择器：

<div class="mt-2 mx-1" data-controller="validate-discount">
  <label class="block text-sm font-medium text-gray-700">Discount Code</label>
  <div class="mt-1">
    <input 
      type="text" 
      name="discount_code" 
      data-validate-discount-target="input"
      data-action="keyup->validate-discount#validate"
      class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm"
    >
  </div>
</div>

注意：如果其他业务逻辑需要用到原input的id属性可以保留，这里新增了3个Stimulus相关属性：

• 容器上的data-controller="validate-discount"：声明该区域由validate-discount控制器接管
• input上的data-validate-discount-target="input"：将input标记为控制器可直接引用的target
• input上的data-action="keyup->validate-discount#validate"：绑定keyup事件触发控制器的validate方法

完整控制器代码 #

替换你之前编写的validate_discount_controller.js内容即可，完全对齐原有jQuery逻辑：

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="validate-discount"
export default class extends Controller {
  static targets = ['input']

  validate() {
    const code = this.inputTarget.value.trim()
    fetch(`/choose_plan/validate_discount_code?code=${encodeURIComponent(code)}`)
      .then(response => response.json())
      .then(data => {
        this.inputTarget.style.backgroundColor = data.valid ? 'aliceblue' : 'white'
      })
  }
}

实现说明 #

• 不需要在connect生命周期里手动绑定事件：Stimulus会通过data-action声明自动完成事件绑定，控制器销毁时也会自动解绑事件，避免内存泄漏
• 对请求参数做了encodeURIComponent转义，处理折扣码包含特殊字符的场景，比原jQuery实现更严谨，不改变原有业务逻辑
• 所有元素引用通过Stimulus Target机制获取，不依赖全局选择器，不会出现同页面多个折扣码输入框时事件冲突的问题
• 触发时机、接口地址、样式反馈规则和原jQuery实现完全一致，无业务逻辑变更

内容的提问来源于stack exchange，提问作者Emil Ståhl Myllyaho