高度な刺激: カスタム アクション オプション

この記事は元々 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);
});

Stimulus コントローラーは次のようになります:

// 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 の外側をクリックした場合にのみ、ターゲットが非表示になります。 :stop アクション オプションに気づきましたか?これについては、あなたが (知らなかった) 刺激機能に関する記事で詳しく説明しました。

スロットル

ここで、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 ミリ秒に 1 回のみ 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>

アクションのオプションをどのように積み重ねることができるかわかりましたか?ストップとスロットルの両方が使用されます。

メタキーと

別の例としては、メタ () または 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 を押した場合にのみ表示されます。

もう一つ?もう 1 つ!

確認あり

ドロップダウンを表示する前に確認ダイアログを表示しますか?

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

これらの積み重ねられたカスタム アクションはすべて機能します。与えられた例は実用的ではありませんが、それらを使用して実行できるすべてのことを示しています。

お気づきのとおり、私はカスタム アクション オプションに名前を付けて、アクション内で読み取ったときに理解しやすいようにするのが好きです。

• click@window->dropdown#hide:whenOutside;
• クリック>ドロップダウン#show:withMetakey.

個人的な好み。もちろん、好きな名前を付けることができます。

これらの例の多くでは、通常は個別のアクションを作成する必要がありますが、カスタム アクション オプションを使用する必要はありません。実際に使用されているのを見れば、その使用例がたくさん見つかるでしょう。

?これらのカスタム アクション オプションを、stimulus-fx という名前の小さく整ったパッケージに集めました。ぜひチェックしてみてください！役立つと思われる場合は、ぜひ貢献してください!

以上が高度な刺激: カスタム アクション オプションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。