進階刺激：自訂操作選項

本文原刊於 Rails Designer

---

Stimulus 允許您註冊自己的自訂操作選項。這些是您可以附加到操作中的內容，例如 keypress->input#validate:prevent（如有關您（不）知道的刺激功能的文章中所示）。 :prevent 是一個操作選項，將阻止預設事件。其他可用選項包括：:stop 和 :self。

您也可以創建自己的！讓您從 Stimulus 中獲得更多收益（誰會想到一個樸素的框架有很多功能？！）。

我想列出一些建議，幫助您了解他們可以做什麼，並激勵您自己製作。

基礎知識

您可以使用Application.registerActionOption方法建立自己的動作選項。然後，該方法將根據您新增的邏輯傳回 true 或 false。

基礎知識如下：

// 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
}

當它傳回true時，它附加到的操作將會運作。使用方式如下：click->controller#action:fire。

現在基礎知識已經清楚了，讓我們來看一些如何使用它的範例。

外出時

常見的操作是按一下元素外部以隱藏它，例如使用模態框或下拉式選單。邏輯應該是這樣的：

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

您的刺激控制器可能如下：

// 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);
  }
}

然後在您的 HTML 中：

<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>

只有當您使用 data-dropdown-target="menu" 點擊 ul 外部時，才會隱藏目標。您注意到：停止操作選項了嗎？我在《你（不）知道的刺激特徵》一文中對此進行了探討。

節流

現在假設您的 dropdown_controller.js 有一個 toggle 方法，並且您只希望用戶出於某種原因每 1000 毫秒切換一次它（沒有判斷！）。

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;
});

每 1000 毫秒只會回傳一次 true。

？弱映射？搞什麼？ ！我正在寫一本書，所以它不那麼可怕！預訂 Rails 開發者 JavaScript.

讓我們用 toggle 方法擴充 dropdown_controller.js ：

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);
  }
}

像這樣使用它：

<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>

看看如何堆疊操作選項？停止和節流都使用。

與Metakey

另一個範例可能是當您只想在按下 meta () 或 ctrl 鍵時開啟下拉式選單

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

在 HTML 中使用它，如下所示：

<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>

只有在點擊時同時按下 cmd/ctrl 時才會顯示下拉式選單。

再來一個？再來一張！

帶確認

想要在顯示下拉清單之前顯示確認對話方塊嗎？

// 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
}

並在您的 HTML 中：

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

所有這些堆疊的自訂操作都將起作用！對於給定的範例，並非實際用途，但它顯示了您可以用它們做的所有事情。

正如您所注意到的，我喜歡命名自訂操作選項，以便在操作中閱讀時更容易理解：

• 點選@window->dropdown#hide:whenOutside;
• 點選->dropdown#show:withMetakey。

個人喜好。您當然可以隨意命名它們。

對於許多這樣的範例，您通常需要建立單獨的操作，但不需要使用自訂操作選項。一旦您看到它們的使用，您就會發現它們有很多用例。

？我將這些自訂操作選項收集在一個名為stimulus-fx的小而整潔的包中；一定要檢查一下！如果您覺得有用，請貢獻一下！

以上是進階刺激：自訂操作選項的詳細內容。更多資訊請關注PHP中文網其他相關文章！