Rangsangan Lanjutan: Pilihan Tindakan Tersuai

Artikel ini pada asalnya diterbitkan di Rails Designer

Stimulus membolehkan anda mendaftarkan pilihan tindakan tersuai anda sendiri. Ini ialah perkara yang boleh anda tambahkan pada tindakan, seperti tekan kekunci->input#validate:prevent (seperti yang ditunjukkan dalam artikel tentang Ciri Rangsangan yang Anda (Tidak) Tahu). :prevent ialah pilihan tindakan dan akan menghalang acara lalai. Pilihan lain yang tersedia ialah: :stop, dan :self.

Anda boleh mencipta sendiri juga! Membolehkan anda memanfaatkan lebih banyak Rangsangan (siapa sangka rangka kerja sederhana mempunyai beberapa ciri?!).

Saya ingin menyenaraikan beberapa cadangan untuk membantu anda mendapatkan idea tentang perkara yang boleh mereka lakukan dan memberi inspirasi kepada anda untuk membuatnya sendiri.

Asasnya

Anda boleh membuat pilihan tindakan anda sendiri dengan kaedah Application.registerActionOption. Kaedah itu kemudiannya akan sama ada mengembalikan benar atau salah, berdasarkan logik yang anda tambahkan.

Asasnya kelihatan seperti ini:

// app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"

const application = Application.start()

application.registerActionOption("fire", ({ event, value }) => {
  // any logic that returns true/false
}

Apabila ia kembali benar, tindakan yang dilampirkan, akan dijalankan. Digunakan seperti ini: klik->controller#action:fire.

Sekarang asasnya sudah jelas, mari lihat beberapa contoh tentang cara anda boleh menggunakannya.

Apabila Di Luar

Tindakan biasa ialah mengklik di luar elemen untuk menyembunyikannya, contohnya dengan modal atau menu lungsur. Logik akan menjadi seperti ini:

application.registerActionOption("whenOutside", ({ event, element }) => {
  return !element.contains(event.target);
});

Dan pengawal Rangsangan anda mungkin kelihatan seperti ini:

// app/javascript/controllers/dropdown_controller.js
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["menu"];

  show() {
    this.menuTarget.removeAttribute("hidden");
  }

  hide() {
    this.menuTarget.setAttribute("hidden", true);
  }
}

Kemudian dalam HTML anda:

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop">Show</button>

  <ul data-dropdown-target="menu" data-action="click@window->dropdown#hide:whenOutside">
  </ul>
</div>

Hanya apabila anda mengklik di luar ul dengan data-dropdown-target="menu" akan ia menyembunyikan sasaran. Adakah anda perasan pilihan :stop action? Saya telah menerokanya dalam artikel mengenai Ciri-ciri Rangsangan yang Anda (Tidak) Tahu.

Tercegat

Sekarang anggap dropdown_controller.js anda mempunyai kaedah togol dan anda hanya mahu pengguna anda menogolnya setiap 1000ms atas apa jua sebab (tiada pertimbangan!).

const throttles = new WeakMap();

application.registerActionOption("throttled", ({ element }, { wait = 1000 } = {}) => {
  if (!throttless.has(element)) {
    throttles.set(element, 0);
  }

  const now = Date.now();
  const lastRun = throttles.get(element);

  if (now - lastRun >= wait) {
    throttles.set(element, now);

    return true;
  }

  return false;
});

Ini hanya akan kembali benar sekali setiap 1000ms.

? Peta Lemah? WTF?! Saya sedang mengusahakan sebuah buku jadi ia kurang menakutkan! Prapesan JavaScript untuk Pembangun Rails.

Mari kita lanjutkan dropdown_controller.js dengan kaedah togol:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["menu"];

  show() {
    this.menuTarget.removeAttribute("hidden");
  }

  toggle() {
    this.menuTarget.toggleAttribute("hidden");
  }

  hide() {
    this.menuTarget.setAttribute("hidden", true);
  }
}

Gunakannya seperti ini:

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop:throttled">Show</button>

  <ul data-dropdown-target="menu" data-action="click@window->dropdown#hide:whenOutside">
  </ul>
</div>

Lihat bagaimana anda boleh menyusun pilihan tindakan? Kedua-dua berhenti dan pendikit digunakan.

DenganMetakey

Contoh lain mungkin apabila anda hanya mahu membuka menu lungsur apabila kekunci meta () atau ctrl ditekan

application.registerActionOption("withMetaKey", ({ event }) => {
  return event.metaKey;
});

Gunakan dalam HTML anda seperti:

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop:throttled:withMetaKey">Show</button>

  <ul hidden data-clicker-target="menu" data-action="click@window->dropdown#hide:whenOutside">
    <li>Menu Item</li>
  </ul>
</div>

Turun turun hanya akan ditunjukkan apabila cmd/ctrl juga ditekan apabila mengklik.

Satu lagi? Lagi satu!

WithConfirm

Ingin menunjukkan dialog pengesahan sebelum anda menunjukkan menu lungsur?

// app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"

const application = Application.start()

application.registerActionOption("fire", ({ event, value }) => {
  // any logic that returns true/false
}

Dan dalam HTML anda:

application.registerActionOption("whenOutside", ({ event, element }) => {
  return !element.contains(event.target);
});

Dan semua tindakan tersuai yang disusun ini akan berfungsi! Untuk contoh yang diberikan bukan penggunaan praktikal, tetapi ia menunjukkan semua perkara yang boleh anda lakukan dengan mereka.

Seperti yang anda perhatikan, saya suka menamakan pilihan tindakan tersuai supaya ia memudahkan untuk difahami apabila dibaca dalam tindakan:

• click@window->dropdown#hide:whenOutside;
• klik->dropdown#show:withMetakey.

Keutamaan peribadi. Anda sudah tentu boleh menamakan mereka mengikut apa yang anda mahukan.

Untuk kebanyakan contoh ini, anda biasanya perlu membuat tindakan berasingan, tetapi bukan dengan pilihan tindakan tersuai. Sebaik sahaja anda melihatnya digunakan, anda akan mendapati banyak kes penggunaan untuknya.

? Saya telah mengumpulkan pilihan tindakan tersuai ini dalam pakej kecil dan kemas yang dipanggil stimulus-fx; pastikan anda menyemaknya! Sumbangkan jika anda rasa ia berguna!

Atas ialah kandungan terperinci Rangsangan Lanjutan: Pilihan Tindakan Tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!