Stimulus — ให้ HTML เป็นคนบอกว่าต้องการ JavaScript อะไร

ปัญหาเดิม: JavaScript ที่ไปตามหาของ "ตอนหน้าโหลด"

งานของบทนี้: ใต้ช่องพิมพ์คอมเมนต์ ให้มีตัวเลขบอกว่าพิมพ์ไปกี่ตัวแล้ว · งานนี้ไม่ต้องถาม server เบราว์เซอร์นับเองได้ จึงต้องใช้ JavaScript

ศัพท์ JavaScript 3 คำที่จะเจอทั้งบท:

• element = แท็กหนึ่งตัวที่อยู่บนหน้าแล้ว เช่น ช่องพิมพ์ <textarea> หนึ่งช่อง · หน้าเว็บทั้งหน้าคือต้นไม้ของ element พวกนี้ (ชื่อทางการ DOM — อยู่ในกล่องศัพท์ข้างล่าง)
• event = สัญญาณที่เบราว์เซอร์ส่งเมื่อมีอะไรเกิดขึ้น เช่น คลิก · พิมพ์ · หน้าโหลดเสร็จ
• listener = ฟังก์ชันที่เราฝากไว้กับ element ว่า "ถ้าสัญญาณนี้ดัง ให้ทำสิ่งนี้" · คล้าย onClick={…} ใน React (บท 73)

ถ้าเขียนแบบที่ตัวอย่างบนอินเทอร์เน็ตส่วนใหญ่สอน จะได้หน้าตาแบบนี้ · ไม่ต้องพิมพ์ตาม เราทดลองให้ดูแล้ว (ใส่ไว้ท้าย app/javascript/application.js และเพิ่ม <p id="old-counter"></p> ใต้ช่องพิมพ์ชั่วคราว):

// ตัวนับแบบเดิม (ทดลอง)
document.addEventListener("DOMContentLoaded", () => {
  const input = document.querySelector("#comment_body")
  const output = document.querySelector("#old-counter")
  input.addEventListener("input", () => {
    output.textContent = input.value.length
  })
})

• document.addEventListener("DOMContentLoaded", () => { … }) — ฝาก listener ไว้กับทั้งหน้า: "พอหน้าโหลดเสร็จ ให้ทำสิ่งในวงเล็บปีกกา" · () => { … } คือฟังก์ชันแบบย่อ (เหมือนที่เขียนใน React บท 73)
• document.querySelector("#comment_body") — "ไล่หาทั้งหน้า เอา element แรกที่ id เป็น comment_body" (# = หาจาก id · id นี้ form.textarea :body ตั้งให้เอง) · หาไม่เจอได้ null (ค่าว่าง เหมือน nil ของ Ruby)
• input.addEventListener("input", …) — ฝาก listener ไว้กับช่องพิมพ์: "ทุกครั้งที่ช่องนี้ถูกพิมพ์ ให้ทำ…" · value.length = ข้อความยาวกี่ตัว · textContent = ข้อความใน element

ผลจริงใน Chrome:

ข้อความ error จริงในแถวสุดท้าย:

TypeError: Cannot read properties of null (reading 'addEventListener')

แถวที่ 2 และ 3 น่ากลัวที่สุด — ไม่มี error สักบรรทัด ผู้ใช้แค่เห็นว่าตัวนับไม่ขยับ · ต้นเหตุคือโค้ดนี้ผูกกับเวลา ("ตอนหน้าโหลด") ไม่ได้ผูกกับของ ("ตอนมีช่องพิมพ์อยู่บนหน้า")

ปัญหาที่สอง: JS ต้องรู้ชื่อ id/คลาสใน HTML เอง · ใครเปลี่ยนชื่อใน HTML โดยไม่ได้เปิดไฟล์ JS ก็พังโดยไม่รู้ตัว

Stimulus — ให้ HTML แปะป้ายบอกเองว่าต้องการ JS ตัวไหน

Stimulus คือ library JavaScript ตัวเล็ก ๆ ที่มากับ Rails 8 (ชิ้นที่สองของ Hotwire · ชิ้นแรกคือ Turbo ที่มี Drive · Frame · Stream) · แทนที่ JS จะไปไล่หา element เอง เราแปะป้ายบน HTML ว่า "ตรงนี้ใช้ JS ตัวไหน · ปุ่มนี้กดแล้วเรียกอะไร · element ไหนคือของที่ JS ต้องใช้"

ป้ายพวกนี้คือ attribute ที่ขึ้นต้นด้วย data- · HTML ยอมให้เราตั้งชื่อ data-อะไรก็ได้ เอง เบราว์เซอร์ไม่เอาไปแสดงผล แต่ JS อ่านได้ · (เคยเห็นแล้วตอน data-theme ของ daisyUI บท 128)

ตัวอย่างจากสไลด์หน้า 48 — เมนูที่กดแล้วเปิด/ปิด (อ่านอย่างเดียว ยังไม่ต้องพิมพ์):

<div data-controller="dropdown">
  <button data-action="click->dropdown#toggle">เมนู</button>
  <ul data-dropdown-target="menu" class="hidden">
    …
  </ul>
</div>

• data-controller="dropdown" — "กล่องนี้ (และทุกอย่างข้างใน) ใช้ JS ชื่อ dropdown" · JS ตัวนี้เรียกว่า controller (คนละอย่างกับ controller ของ Rails ฝั่ง server — ชื่อซ้ำกันเฉย ๆ)
• data-action="click->dropdown#toggle" — อ่านว่า "เมื่อ click → ให้ controller dropdown ทำ method toggle" · รูปแบบคือ event->ชื่อcontroller#ชื่อmethod
• data-dropdown-target="menu" — "element นี้คือของชื่อ menu ที่ controller dropdown จะใช้" · ใน JS เรียกมันว่า this.menuTarget ได้เลย ไม่ต้อง querySelector (this = controller ตัวนี้เอง เหมือน self ของ Ruby)
• class="hidden" — คลาส Tailwind (บท 72) ที่ซ่อน element · toggle ของ dropdown แค่ใส่/ถอดคลาสนี้ เมนูก็เปิด/ปิด

เปิดไฟล์ HTML ไฟล์เดียวก็รู้แล้วว่าปุ่มนี้ทำอะไร ไม่ต้องไปเปิดไฟล์ JS ไล่ดู · ถ้าเทียบกับ React (บท 73): data-action คล้าย onClick={toggle} ใน JSX — ต่างกันที่ React เป็นคนสร้าง HTML ส่วน Stimulus มาเกาะ HTML ที่ server (ERB) ส่งมาให้แล้ว

ชื่อไฟล์ ↔ ชื่อใน HTML — ผิดตัวเดียว เงียบทั้งหน้า

controller ทุกตัวอยู่ในโฟลเดอร์ app/javascript/controllers/ ชื่อไฟล์ลงท้าย _controller.js · ไม่ต้องลงทะเบียนที่ไหนเพิ่ม (แบบเดียวกับ theme ในบท 129) — สร้างไฟล์ปุ๊บ Rails เจอเอง

เบื้องหลังมีสองบรรทัดที่ Rails เขียนไว้ให้แล้ว: pin_all_from ใน config/importmap.rb ลงชื่อทุกไฟล์ในโฟลเดอร์ลงสมุด importmap · และ eagerLoadControllersFrom(…) ใน app/javascript/controllers/index.js โหลดทุกไฟล์ แล้วตั้งชื่อ controller จากชื่อไฟล์ · ชื่อไฟล์จึงสำคัญมาก เพราะมันคือชื่อที่ต้องเขียนใน HTML

กฎตั้งชื่อ (ตัวนับของเรา):

เราลองสะกดผิดให้ดูแล้วใน Chrome (พิมพ์ "อร่อย" ลงช่อง แล้วดูตัวนับ):

แบบแรกเงียบเพราะ Stimulus มีแค่ controller ชื่อ character-counter · hello · theme (เราเปิดดูรายชื่อใน Chrome แล้ว) · ป้าย character_counter ไม่ตรงกับตัวไหนก็ถูกข้ามไป · ตัวนับไม่ทำงานและ console เงียบ → เช็คชื่อใน data-controller ก่อนอย่างอื่น

ลงมือ: ตัวนับอักษรใต้ช่องคอมเมนต์

รู้จักป้ายครบแล้ว มาทำของจริงกัน · 2 ไฟล์ · เริ่มจากโค้ดตอนจบบท 133 · ในโค้ดจะเจอ method ชื่อ connect กับ disconnect — ตอนนี้จำแค่ว่า "ทำตอนฟอร์มโผล่" กับ "ทำตอนฟอร์มหายไป" หัวข้อถัดจากนี้จะพิสูจน์ให้ดู

ขั้น 1 — สร้างไฟล์ controller

ภาษาคนก่อน — controller ตัวนี้ทำ 3 อย่าง: ① ฟอร์มโผล่ → ฝาก listener ไว้กับช่องพิมพ์ แล้วนับครั้งแรก · ② ทุกครั้งที่พิมพ์ → เขียนตัวเลขใหม่ลงช่องโชว์ · ③ ฟอร์มหายไป → ถอด listener ออก

สร้างไฟล์ใหม่ app/javascript/controllers/character_counter_controller.js (ชื่อนี้ → ใน HTML เรียก character-counter):

import { Controller } from "@hotwired/stimulus"

// ตัวนับอักษรของช่องพิมพ์คอมเมนต์ (อยู่ใน comments/_form.html.erb) แสดงเป็น "12 / 1000"
export default class extends Controller {
  static targets = ["input", "output"]

  // ฟอร์มโผล่ (โหลดหน้า หรือ Turbo Stream ใส่ฟอร์มใหม่): เริ่มฟังการพิมพ์
  connect() {
    this.onInput = this.update.bind(this)
    this.inputTarget.addEventListener("input", this.onInput)
    this.update()
  }

  // ฟอร์มหายไป: ถอด listener ที่ connect ผูกไว้
  disconnect() {
    this.inputTarget.removeEventListener("input", this.onInput)
  }

  update() {
    this.outputTarget.textContent = `${this.inputTarget.value.length} / ${this.inputTarget.maxLength}`
  }
}

ทีละบรรทัด:

• import { Controller } from "@hotwired/stimulus" — ดึงแม่แบบ Controller มาจาก Stimulus (ชื่อ @hotwired/stimulus อยู่ในสมุด importmap แล้ว บท 127)
• export default class extends Controller — "ไฟล์นี้ส่งออก class หนึ่งตัว ที่สืบทอดจาก Controller" · เหมือน Ruby class X < Controller แต่ไม่ตั้งชื่อ เพราะชื่อมาจากชื่อไฟล์
• static targets = ["input", "output"] — ประกาศว่า controller นี้ใช้ target สองตัว · Stimulus อ่านรายชื่อจากบรรทัดนี้แล้วสร้าง this.inputTarget และ this.outputTarget ให้ · (static = ค่าที่ติดกับ class ทั้งก้อน ไม่ใช่ของแต่ละตัว — ตอนนี้จำแค่ว่า "รายการประกาศ" ของ Stimulus ขึ้นต้นด้วย static)
• connect() { … } · disconnect() { … } · update() { … } — method ของ class · JS เขียนแค่ชื่อตามด้วย () { } ไม่มีคำว่า def แบบ Ruby
• this.onInput = … — เก็บของไว้ในตัว controller ให้ method อื่นหยิบใช้ได้ · เหมือน @on_input = … ของ Ruby
• this.update.bind(this) — หยิบ method update ออกมาเป็นฟังก์ชันที่ฝากให้เบราว์เซอร์ได้ พร้อมมัดไว้ว่า this คือ controller ตัวนี้ · ถ้าไม่ bind พอเบราว์เซอร์เรียก this จะกลายเป็นช่องพิมพ์แทน แล้ว this.outputTarget หาไม่เจอ · เก็บไว้ใน this.onInput เพื่อเอาตัวเดียวกันไปถอดใน disconnect
• addEventListener("input", this.onInput) — event input ดังทุกครั้งที่ข้อความในช่องเปลี่ยน (พิมพ์ ลบ วาง) · removeEventListener คือคำสั่งถอดออก
• this.update() ใน connect — นับทันทีหนึ่งรอบตอนฟอร์มโผล่ (ฟอร์มที่กลับมาพร้อมข้อความเดิมจะได้ตัวเลขถูกตั้งแต่แรก)
• `${…} / ${…}` — ข้อความที่แทรกค่าได้ เหมือน "#{…}" ของ Ruby · value.length = จำนวนตัวอักษร · maxLength = ค่า maxlength ของช่อง (1000 · ใส่ในขั้น 2)

ขั้น 2 — แปะป้ายใน ERB

เปิด app/views/comments/_form.html.erb (ฟอร์มคอมเมนต์จากบท 132) หาบล็อกช่องความคิดเห็น · แก้ 3 จุด: ① ป้าย controller บน <div> ② ป้าย target + maxlength บนช่องพิมพ์ ③ เพิ่ม <p> ที่โชว์ตัวเลข

    <div>
      <%= form.label :body, "ความคิดเห็น", class: "block font-medium" %>
      <%= form.textarea :body, rows: 3, class: ["textarea w-full mt-2", { "textarea-error": comment.errors[:body].any? }] %>
    </div>

    <div data-controller="character-counter">
      <%= form.label :body, "ความคิดเห็น", class: "block font-medium" %>
      <%= form.textarea :body, rows: 3, maxlength: 1000, data: { character_counter_target: "input" },
            class: ["textarea w-full mt-2", { "textarea-error": comment.errors[:body].any? }] %>
      <p class="mt-1 text-right text-sm text-base-content/70" data-character-counter-target="output"></p>
    </div>

• data-controller="character-counter" บน <div> ที่ห่อ label + ช่องพิมพ์อยู่แล้ว — กรอบของ controller · target ต้องอยู่ข้างในกรอบนี้
• maxlength: 1000 — attribute มาตรฐานของ HTML: เบราว์เซอร์ไม่ยอมให้พิมพ์เกิน 1000 ตัวเอง (ตรงกับ validation ของ Comment ที่จำกัด 1000) · JS อ่านเลขนี้ไปโชว์ ไม่ต้องจำเลขซ้ำ
• data: { character_counter_target: "input" } — hash data: ของ helper กลายเป็น data-… และขีดล่างกลายเป็นขีดกลาง
• บรรทัด class: [ … ] คือของเดิมจากบท 132 ไม่ได้แก้ แค่ย้ายลงบรรทัดใหม่ให้อ่านง่าย (Ruby ยอมให้ขึ้นบรรทัดใหม่หลังจุลภาค)
• <p … data-character-counter-target="output"></p> — ที่โชว์ตัวเลข · ตั้งใจให้ว่าง ให้ JS เติมเอง ถ้าผู้ใช้ปิด JS จะไม่มีเลข "0" ค้างหลอกตา
• คลาสของ <p>: mt-1 เว้นระยะด้านบนนิดหน่อย · text-right ชิดขวา · text-sm ตัวเล็กลง · text-base-content/70 สีตัวอักษรของธีมแบบจางลง (บท 128)

HTML ที่เบราว์เซอร์ได้จริง:

$ curl -s localhost:3000/posts/30 | grep -A5 'data-controller="character-counter"'
    <div data-controller="character-counter">
      <label class="block font-medium" for="comment_body">ความคิดเห็น</label>
      <textarea rows="3" maxlength="1000" data-character-counter-target="input" class="textarea w-full mt-2" name="comment[body]" id="comment_body">
</textarea>
      <p class="mt-1 text-right text-sm text-base-content/70" data-character-counter-target="output"></p>
    </div>

บรรทัด <textarea …> มาจาก form.textarea — เห็น maxlength="1000" และ data-character-counter-target="input" ที่ Rails แปลงจาก hash ให้แล้ว

ขั้น 3 — เปิดดู

ใช้ bin/dev อยู่แล้ว → แค่ refresh หน้า (คลาสใหม่ text-right ถูกสร้าง CSS ให้อัตโนมัติ) · ถ้าเปิดด้วย bin/rails server เฉย ๆ ให้สั่ง bin/rails tailwindcss:build ก่อน · ไม่ต้อง bin/importmap pin และไม่ต้อง restart server

เปิด http://localhost:3000/posts/30 แล้วพิมพ์ในช่องความคิดเห็น (ตอนส่ง ใส่ชื่อด้วย ไม่งั้นฟอร์มเด้งกลับมาพร้อม error) · ผลจริงใน Chrome:

เปิดหน้า            0 / 1000
พิมพ์ "อร่อย"        5 / 1000
พิมพ์ต่อ "มาก"       8 / 1000
ส่งคอมเมนต์          0 / 1000      ← ฟอร์มใบใหม่ connect แล้วนับเอง

"อร่อย" นับได้ 5 เพราะวรรณยุกต์ ่ นับเป็นหนึ่งตัว (อ ร ่ อ ย) · Ruby ก็นับแบบเดียวกัน ตัวนับจึงตรงกับที่ validation 1000 ตัวนับ

อยากเห็นว่าไฟล์ใหม่ถูกส่งไปเบราว์เซอร์จริง ลองค้นใน HTML ของหน้า (ไม่ทำก็ได้):

$ curl -s localhost:3000/posts/30 | grep character_counter
    "controllers/character_counter_controller": "/assets/controllers/character_counter_controller-b787bcc6.js",
<link rel="modulepreload" href="/assets/controllers/character_counter_controller-b787bcc6.js">

• บรรทัดแรก — อยู่ในสมุด importmap (บท 127): ชื่อเล่น controllers/character_counter_controller → ไฟล์จริงที่มีเลขรุ่นต่อท้าย
• บรรทัดที่สอง — modulepreload = บอกเบราว์เซอร์ให้ "โหลดไฟล์นี้มารอไว้เลย" จะได้ไม่ต้องรอตอนใช้

ขั้น 4 — เก็บงาน

$ git add -A
$ git commit -m "Stimulus ตัวนับอักษรช่องคอมเมนต์"

commit ไว้ก่อน เพราะสองหัวข้อถัดไปและภารกิจท้ายบทจะทดลองแก้ไฟล์เดิม แล้วคืนด้วย git restore . (= "ทิ้งที่แก้ไว้ กลับไปเป็นแบบ commit ล่าสุด") · ส่วนไฟล์ prompts/03-hotwire.md และกฎข้อ 9–12 ใน prompts/00-context.md ยังไม่ต้องทำ — ทำในบท 135

connect / disconnect — ผูกกับ "ตอนที่ element มีอยู่" ไม่ใช่ "ตอนหน้าโหลด"

นี่คือหัวใจของ Stimulus (สไลด์หน้า 49) · controller มี method พิเศษสองตัว: connect() ทำงานทุกครั้งที่ element ที่มี data-controller โผล่บนหน้า · disconnect() ทำงานทุกครั้งที่มันหายไป

Stimulus รู้ได้ยังไง? เบราว์เซอร์มีเครื่องมือชื่อ MutationObserver = "ยามที่คอยดูว่ามี element ถูกเพิ่มหรือลบจากหน้าไหม แล้วรายงาน" · Stimulus จ้างยามคนนี้เฝ้าทั้งหน้าตลอดเวลา · ไม่ว่าใครเปลี่ยนหน้า — Turbo Drive · Turbo Stream · broadcast — ยามเห็นหมด

มาดูด้วยตา: ใส่บรรทัด console.log("ตัวนับ: connect") เป็นบรรทัดแรกใน connect() และ console.log("ตัวนับ: disconnect") ใน disconnect() ของตัวนับที่เพิ่งทำ · console.log("…") = พิมพ์ข้อความลงแท็บ Console ของ DevTools (กด F12 หรือ ⌥⌘J บน Mac) · ลองทำตามได้เลย เสร็จแล้ว git restore .

1  เปิด /posts                        (หน้ารวม ไม่มีฟอร์มคอมเมนต์)
2  คลิกบทความ "นมเย็น"                  (Turbo Drive → /posts/30)
3  พิมพ์ "อร่อยมาก" แล้วส่งคอมเมนต์       (Turbo Stream แทนฟอร์ม)
4  คลิก "กลับไปหน้ารวม"
5  กดปุ่ม Back ของเบราว์เซอร์
6  คลิก "บทความ" บน navbar
7  คลิก "นมเย็น" อีกรอบ (เคยเปิดแล้ว)

1 เปิด /posts                 (ไม่มีอะไร)
2 คลิกบทความ                   ตัวนับ: connect
3 ส่งคอมเมนต์                  ตัวนับ: disconnect
                               ตัวนับ: connect
4 กลับไปหน้ารวม                ตัวนับ: disconnect
5 กด Back                     ตัวนับ: connect
6 คลิก บทความ บน navbar         ตัวนับ: disconnect
7 คลิกนมเย็นอีกรอบ              ตัวนับ: connect
                               ตัวนับ: disconnect
                               ตัวนับ: connect

เทียบกับ React (บท 74): connect() ≈ โค้ดใน useEffect ตอน component โผล่ · disconnect() ≈ ฟังก์ชันที่ return ออกจาก useEffect · ปัญหาเดียวกัน คำตอบคนละหน้าตา

ของที่สร้างใน connect ต้องเก็บกวาดใน disconnect

ถ้า connect สร้างของที่อยู่นอก element ของเรา ของพวกนั้นไม่หายไปพร้อม element มันอยู่ต่อจนกว่าจะปิดแท็บ · ตัวอย่างเช่น

• setInterval(ฟังก์ชัน, 1000) — ตั้งนาฬิกาให้ทำซ้ำทุก 1000 มิลลิวินาที (1 วินาที) ไปเรื่อย ๆ · ปิดด้วย clearInterval
• listener บน window หรือ document — ฝากไว้กับทั้งหน้า ไม่ใช่กับ element ของเรา
• library ภายนอกที่เปิดไว้ · สาย WebSocket ที่ต่อเอง (สายที่ต่อค้างไว้ บท 133)

ทดลองให้ดู (ลองตามได้ แล้ว git restore .): เพิ่มสองบรรทัดนี้ท้าย connect() ของตัวนับ แต่ไม่เพิ่มอะไรใน disconnect · ความหมาย: "เก็บฟังก์ชันที่ log คำว่า กดคีย์ ไว้ใน this.onKey · แล้วฝากไว้กับทั้งหน้า ให้ทำทุกครั้งที่กดแป้น (event keydown)"

    this.onKey = () => console.log("กดคีย์")
    document.addEventListener("keydown", this.onKey)

เปิด /posts/30 ตรง ๆ → กดตัว a ในช่องคอมเมนต์ 1 ครั้ง
"กลับไปหน้ารวม" → คลิกนมเย็น → กด a 1 ครั้ง        (รอบ 1)
"กลับไปหน้ารวม" → คลิกนมเย็น → กด a 1 ครั้ง        (รอบ 2)
"กลับไปหน้ารวม" (ไม่มีฟอร์มแล้ว) → กด a 1 ครั้ง

สังเกตว่าเราเก็บฟังก์ชันไว้ใน this.onKey (เหมือนเก็บใน @on_key ของ Ruby) · เพราะ removeEventListener ต้องได้ฟังก์ชันตัวเดียวกันเป๊ะกับตอน add ถึงจะถอดออก · ถ้าเขียนฟังก์ชันใหม่หน้าตาเหมือนกัน มันถือว่าเป็นคนละตัว ถอดไม่ออก

เทียบ: React เก็บกวาดใน return () => clearInterval(id) ของ useEffect · Go ใช้ defer (บท 08) ปิดของตอนออกจากฟังก์ชัน — ความคิดเดียวกัน "เปิดอะไร ต้องปิดสิ่งนั้น"

ย้อนอ่านปุ่มสลับธีมของบท 129 — ตอนนี้อ่านออกทุกบรรทัด

บรรทัดใน toggle() (อ่าน localStorage · matchMedia · ? :) อธิบายทีละบรรทัดไว้แล้วในบท 129 · รอบนี้ดูเฉพาะส่วนที่เป็นเรื่อง Stimulus (ตัดบรรทัด import / export หัวไฟล์ · คอมเมนต์ และ } ปิดท้ายออก ให้เหลือแค่สอง method)

<%# app/views/shared/_navbar.html.erb (เฉพาะปุ่ม) %>
<button type="button" class="btn btn-ghost btn-sm" aria-label="สลับธีมสว่าง/มืด"
        data-controller="theme" data-action="theme#toggle">🌓</button>

// app/javascript/controllers/theme_controller.js
  connect() {
    const saved = localStorage.getItem("theme")
    if (saved) document.documentElement.dataset.theme = saved
  }

  toggle() {
    const html = document.documentElement
    const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches
    const current = html.dataset.theme || (systemDark ? "dark" : "light")
    const next = current === "dark" ? "light" : "dark"

    html.dataset.theme = next
    localStorage.setItem("theme", next)
  }

• data-controller กับ data-action อยู่บนปุ่มตัวเดียวกัน ได้ — ปุ่มเป็นทั้งกรอบและตัวกด
• data-action="theme#toggle" ไม่มี click-> — Stimulus มีค่าเริ่มต้นให้: บน <button> = click · บน <textarea> = input · บน <form> = submit
• connect() — อ่านธีมที่จำไว้ใน localStorage (ที่เก็บข้อมูลเล็ก ๆ ของเบราว์เซอร์) แล้วใส่ data-theme บนแท็ก <html> (daisyUI เปลี่ยนสีทั้งเว็บจากป้ายนี้ บท 128) · navbar อยู่ใน <body> จึงถูกเปลี่ยนทุกครั้งที่ Turbo เปลี่ยนหน้า → เราใส่ log ดูแล้ว connect ยิงทุกหน้าที่เปิด ไม่เป็นไร เพราะแค่ใส่ธีมเดิมซ้ำ
• ทำไมไม่มี disconnect? เพราะ connect ไม่ได้สร้างอะไรที่ค้างอยู่ (ไม่มี timer ไม่มี listener) · กฎคือ "สร้างอะไร เก็บสิ่งนั้น" ไม่ได้แปลว่าทุก controller ต้องมี disconnect

values · classes · outlets — ส่งของจาก HTML ให้ JS แบบมีชื่อ

ตัวนับของเราอ่านเลข 1000 จาก maxlength ได้เพราะเป็น attribute มาตรฐาน · แต่ถ้าอยากส่งค่าอื่นจาก server (ERB) ให้ JS หรืออยากบอกชื่อคลาส CSS ให้ JS ใช้ Stimulus มีช่องทางมาตรฐานให้ (สไลด์หน้า 50) · ดูหน้าตาไว้ก่อน เดี๋ยวได้ลองในภารกิจ

• ค่าจาก server = ค่าที่ ERB เขียนลงใน HTML ตอนสร้างหน้า เช่น (สมมติ controller ตั้ง @warn_at ไว้) data-character-counter-warn-at-value="<%= @warn_at %>" · JS ไม่ต้องจำเลขเอง
• ชื่อใน HTML มีขีดกลาง ใน JS เป็นตัวใหญ่ต่อกัน: warn-at → warnAt · ระบุชนิดไว้ (Number ตัวเลข · String ข้อความ · Boolean จริง/เท็จ) Stimulus แปลงให้ เพราะทุกอย่างใน HTML เป็นข้อความ · ไม่ใส่ attribute เลย ชนิด Number ได้ค่า 0
• ทำไม classes ต้องมาจาก HTML? — สองเหตุผล: คนแก้หน้าตาเปลี่ยนสีได้โดยไม่แตะ JS · และกับดักบท 128: Tailwind สร้าง CSS เฉพาะคลาสที่เขียนครบชื่ออยู่ในไฟล์ · ชื่อคลาสครบ ๆ ใน ERB อย่าง "text-error" Tailwind เห็นแน่นอน

เส้นแบ่ง: งานไหน Stimulus งานไหน Turbo

ถามคำถามเดียว (สไลด์หน้า 50): "คำตอบต้องมาจาก server ไหม?" · ต้อง → Turbo · ไม่ต้อง เบราว์เซอร์ทำเองได้ → Stimulus

สี่แถวแรกคือ "ของที่เขียนบ่อยที่สุด 5 อย่าง" ของสไลด์หน้า 50 · ถ้าเจองานเหล่านี้ ให้นึกถึง Stimulus controller ตัวเล็ก ๆ ก่อนจะเขียน JS แบบอื่น

// character_counter_controller.js
  static targets = ["input", "output"]
  static values = { warnAt: Number }
  static classes = ["warning"]
  …
  update() {
    const length = this.inputTarget.value.length
    this.outputTarget.textContent = `${length} / ${this.inputTarget.maxLength}`
    this.outputTarget.classList.toggle(this.warningClass, length >= this.warnAtValue)
  }

<%# _form.html.erb %>
    <div data-controller="character-counter"
         data-character-counter-warn-at-value="10"
         data-character-counter-warning-class="text-error">

เปิดหน้า               0 / 1000    mt-1 text-right text-sm text-base-content/70
พิมพ์ "อร่อยมาก" (8)     8 / 1000    mt-1 text-right text-sm text-base-content/70
พิมพ์ "ๆๆ" (10)        10 / 1000    mt-1 text-right text-sm text-base-content/70 text-error   ← แดง
ลบ 1 ตัว (9)            9 / 1000    mt-1 text-right text-sm text-base-content/70

แบบฝึกหัด

ติดตรงไหน ถามผู้สอนหรือ AI ด้วยประโยคในกล่องศัพท์ได้เลย · หรือแปะ HTML ที่มี data-controller กับไฟล์ controller แล้วถามว่า "ทำไม connect ไม่ทำงาน"

ถ้าเปิดสไลด์ดูประกอบ

อ้างอิง

• Stimulus Handbook — Introduction — อ่านทั้งหน้า (สั้น) · ที่มาของแนวคิด "HTML บอกว่าต้องการ JS อะไร" และเหตุผลที่ Stimulus ไม่สร้าง HTML เอง
• Stimulus Reference — Controllers § Naming Conventions — อ่านตาราง Naming Conventions และหัวข้อ Identifiers · ยืนยันกฎชื่อไฟล์ขีดล่าง ↔ identifier ขีดกลาง
• Stimulus Reference — Lifecycle Callbacks § Disconnection — อ่าน Connection · Disconnection · Reconnection · Order and Timing · ยืนยันว่าใช้ MutationObserver และ connect สองครั้งมี disconnect คั่นเสมอ
• Stimulus Reference — Actions § Event Shorthand — ดูตาราง event เริ่มต้นของแต่ละ element · เหตุผลที่ theme#toggle ไม่ต้องมี click->
• Stimulus Reference — Values และ CSS Classes — อ่านตัวอย่างแรกของแต่ละหน้า · ที่มาของภารกิจท้ายบท · Outlets ดูแค่ย่อหน้าแรกพอ
• MDN — removeEventListener § Matching event listeners for removal — อ่านหัวข้อนี้หัวข้อเดียว · ทำไมต้องเก็บฟังก์ชันไว้ใน this.onInput เพื่อถอดตัวเดียวกัน
• MDN — MutationObserver — อ่านแค่ย่อหน้าแรก · รู้จัก "ยาม" ที่ Stimulus ใช้เฝ้าหน้า
• github.com/hotwired/stimulus-rails — อ่าน README ส่วน Usage with import map · อธิบายว่าไฟล์ใน app/javascript/controllers ถูกโหลดเองผ่าน pin_all_from