Modern Front-End Development for Rails

Automating Value Changes

Another useful feature of the Stimulus Values API is that the API includes a callback method called <value name>Changed, which is automatically called after a Stimulus value is changed. In other words, we could rewrite our toggle controller as follows:

chapter_03/05/app/packs/controllers/favorite_toggle_controller.ts

import { Controller } from "stimulus"

export default class FavoriteToggleController extends Controller {
  static targets = ["elementToHide", "elementWithText"]
  elementToHideTarget: HTMLElement
  elementWithTextTarget: HTMLElement

  static values = { visible: Boolean }
  visibleValue: boolean

  toggle(): void {
    this.flipState()
  }

  flipState(): void {
    this ...