本文原刊於 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>
看看如何堆疊操作選項？停止和節流都使用。
另一個範例可能是當您只想在按下 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);
});
所有這些堆疊的自訂操作都將起作用！對於給定的範例，並非實際用途，但它顯示了您可以用它們做的所有事情。
正如您所注意到的，我喜歡命名自訂操作選項，以便在操作中閱讀時更容易理解：
個人喜好。您當然可以隨意命名它們。
對於許多這樣的範例，您通常需要建立單獨的操作，但不需要使用自訂操作選項。一旦您看到它們的使用，您就會發現它們有很多用例。
？我將這些自訂操作選項收集在一個名為stimulus-fx的小而整潔的包中；一定要檢查一下！如果您覺得有用，請貢獻一下！
以上是進階刺激：自訂操作選項的詳細內容。更多資訊請關注PHP中文網其他相關文章！
