如何将Jquery代码转换为StimulusJS控制器Rails 7？

Question

我正在构建一个功能来显示文本字段中的折扣代码是否有效。我刚刚成功地使用Jquery构建了它，但现在我想将它转换为StimulusJS控制器。但我不太确定该怎么做。

我目前对jquery的看法是：

<div class="mt-2 mx-1">
 <label class="block text-sm font-medium text-gray-700">Discount Code</label>
 <div class="mt-1">
  <input type="text" name="discount_code" id="validateCode" 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>

<script>
  $('#validateCode').on("keyup", function(){
    let code = $('#validateCode').val()
    fetch('/choose_plan/validate_discount_code?code=' + code)
    .then(response => response.json())
    .then(data => { if(data.valid)
      { $('#validateCode').css("background-color", "aliceblue") }
    else
      { $('#validateCode').css("background-color", "white") }
    });
  });
</script>

我的validate_discount_controller.js已经开始了：

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="validate-discount"
export default class extends Controller {
  connect() {
    this.element.addEventListener('change', (e) => {
      // execute a fetch request or something here
    })
  }
}

Answer 1

这可以在刺激中完成，但如果你让它起作用，你可能只想继续做其他的事情，如果需要的话，以后再重构。

尽管如此，这里还是详细介绍了如何将您的jQuery转换为普通的JS (即没有库)以及刺激。

一个很好的资源是这个网站- https://youmightnotneedjquery.com/或Mozilla docs https://developer.mozilla.org/。

jQuery击穿

• $('#validateCode').on("keyup", function(){
  • 在大多数情况下，您可以通过使用data-action属性来避免设置事件侦听器--这是为您添加事件侦听器的一种非常简单的方法。
  • 例如，data-action="keyup->validate-discount#validate"将在keyup上调用控制器的validate方法。
  • 请参阅https://stimulus.hotwired.dev/reference/actions

• let code = $('#validateCode').val()
  • 通过读取元素的“`value”属性，可以在不使用jQuery的情况下从输入读取值。
  • https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#methods
  • 您可以通过this.element访问控制器的元素，所以只需要this.element.value。

• { $('#validateCode').css("background-color", "aliceblue") }...
  • 可以在元素style上更新https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style。
  • 但是，使用类可能更好，刺激可以为您想要使用的各种“状态”声明类，并使它们在控制器中可用。
  • https://stimulus.hotwired.dev/reference/css-classes

示例

<form>
  <div class="mt-2 mx-1">
    <label class="block text-sm font-medium text-gray-700" for="validateCode">Discount Code</label>
    <div class="mt-1">
      <input type="text" name="discount_code" id="validateCode" class="all-the-100-classes"
        data-controller="validate-discount" data-action="validate-discount#validate keyup->validate-discount#validate"
        data-validate-discount-valid-class="bg-error" data-validate-discount-invalid-class="bg-success">
    </div>
  </div>
</form>

注意:我已经包含了一个脱去脚本，因为您可能不想每次击键都调用API --这很可能会给您的用户带来挫折和沉重的负担。您可能需要考虑一种节流阀方法。

import { Controller } from '@hotwired/stimulus';

// https://www.joshwcomeau.com/snippets/javascript/debounce/
const debounce = (callback, wait) => {
  let timeoutId = null;
  return (...args) => {
    window.clearTimeout(timeoutId);
    timeoutId = window.setTimeout(() => {
      callback.apply(null, args);
    }, wait);
  };
};

export default class extends Controller {
  // https://stimulus.hotwired.dev/reference/css-classes
  static classes = ['invalid', 'valid'];

  // https://stimulus.hotwired.dev/reference/values
  static values = {
    endpoint: {
      default: '/choose_plan/validate_discount_code?code=',
      type: String,
    },
  };

  initialize() {
    // this will ensure that the API does not get called too much
    // the wait time (300) is in milliseconds so adjust as needed
    this.validate = debounce(this.validate.bind(this), 300);
  }

  validate() {
    // read the value from the input
    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
    const code = this.element.value;

    fetch('/choose_plan/validate_discount_code?code=' + code)
      .then((response) => response.json())
      .then(({ valid }) => {
        if (valid) {
          this.element.classList.remove(...this.invalidClasses);
          this.element.classList.add(...this.validClasses);
        } else {
          this.element.classList.add(...this.invalidClasses);
          this.element.classList.remove(...this.validClasses);
          this.element.setCustomValidity('Thats incorrect!');
        }

        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
        this.element.reportValidity();
      });
  }
}