ホームページ ウェブフロントエンド jsチュートリアル スティミュラスコントローラーによる継承

スティミュラスコントローラーによる継承

Nov 22, 2024 am 08:56 AM

この記事は元々 Rails Designer で公開されたものです


私にとって、Stimulus コントローラーを使用することで最も素晴らしいことは、小さな特定のことにコントローラーを使用できることです。 1 つのコンポーネントに対して大きなコントローラーを作成するのではなく、それぞれ独自の小さな処理を実行する複数の小さな Stimulus コントローラーを作成します。さらに結束力が必要な場合は、アウトレットを使用して「一緒に話す」ことができます。

しかし、別の Stimulus コントローラーと重複するロジックを持つ別の Stimulus コントローラーが必要な場合は、次の 2 つのことを行うことができます。

  • インポートする個別の関数にロジックを抽出します。または、
  • 継承を使用して、他のコントローラーからロジックを取得します。

今日私が探求したいのは継承です。最近、一括アクション コンポーネントを UI コンポーネント ライブラリに追加しました。これにより、ユーザーはリストから複数の項目を選択し、それらすべてに同じアクションを適用できます。 すべて削除。これは、チェックボックス コンポーネントとかなりの部分で重複します。どちらも、アイテムを選択するためにまったく同じロジックを必要としました。一括アクションの場合は、項目を選択することが始まりです。その後、カウンター付きの「アクション バー」が表示されます。

Inheritance with Stimulus Controller
(動くgifは元記事をご覧ください!?)

: この記事は、最初から最後まで一括アクションを追加することに関するものではありません。そのためには、Rails Designer をチェックすることをお勧めします (これには、Rails SaaS アプリですぐに使用できる数百のコンポーネントもあります)。

まず、checkboxes_controller.js を見てみましょう (Rails Designer に含まれているものはもう少し複雑です!)。

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

export default class extends Controller {
  static values = { checkboxesCheckedCount: Number };

  selectAll() {
    this.setCheckboxesTo(true);
  }

  deselectAll() {
    this.setCheckboxesTo(false);
  }

  setCheckboxesTo(boolean) {
    const checkboxes = this.checkboxes
      .filter(checkbox => !checkbox.disabled)
      .forEach(checkbox => checkbox.checked = boolean);

    this.checkboxesCheckedCountValue = checkboxes.length;
  }

  // …
}
ログイン後にコピー

これは簡単に理解できると思いますね?次に、bulk_actions_controller.js:

// app/javascript/controllers/bulk_actions_controller.js
import CheckboxesController from "controllers/checkboxes_controller";

export default class BulkActionsController extends CheckboxesController {
  static values = { open: Boolean };

  // private

  checkboxesCheckedCountValueChanged() {
    this.openValue = this.checkboxesCheckedCountValue;
  }
}
ログイン後にコピー

コードの簡単な説明: checkboxesCheckedCountValue が変更されたとき (checkboxes_controller の値) openValue を設定します (0 は false、その他はすべて true)。十分簡単です!次に、openValue を使用してアクション バーの表示/非表示を切り替えます。

これは、Controller から継承しているのではなく、2 行目でインポートされている CheckboxesController から継承していることがわかります ("@hotwired/stimulus"; からの一般的な import {Controller } の代わりに)。

しかし、現時点で書かれているように、これでは十分ではありません。 checkboxes_controller は実際には正しくエクスポートされていません。まずそれをやってみましょう:

import { Controller } from "@hotwired/stimulus";

// Was: `export default class extends Controller {`
export default class CheckboxesController extends Controller {
  // …
}
ログイン後にコピー

それでは、これはどのように機能するのでしょうか? Ruby (および Rails) の場合、次のように別のクラスから継承できます。

class User < ApplicationRecord
class Integration::Netlify < Integration::Base
# etc.
ログイン後にコピー

Rails、より具体的には Zeitwerk がクラスを自動ロードするため、上記は問題なく機能します。一般的な Ruby アプリでは、クラスも自動ロードされないため、手動でロードする必要があります。

require "application_record"
require "integration/base"
# etc.
ログイン後にコピー

これは JavaScript の仕組みと似ています。

刺激コントローラー (デフォルト クラスをエクスポートしてコントローラーを拡張) を記述する方法は、刺激コントローラーを拡張する匿名クラスを作成することです (クラス < Integration::Base に似ています)。 checkboxes_controller は、Stimulus Controller を拡張する名前付きクラスになりました。

これで、bulk_actions_controller に問題なくインポートできるようになりました。これにより、関数とその他すべてのロジック (this.checkboxesCheckedCountValue) を checkboxes_controller から継承することができます。 Ruby クラスとは異なり、プライベート関数 (# で始まる関数) は他の JavaScript クラスでは使用できないことに注意してください。

Stimulus コントローラーの継承を使用する場合

私は相続にはあまり手を伸ばしません。多くの場合、ロジックを別のファイル内の独自の関数に抽出し、代わりにそれをインポートします (Ruby の include または extend のように)。ただし、他のコントローラーのロジックと 100% 重複していて、他のコントローラーに変更を加える必要がない場合、継承は素晴らしくクリーンなオプションです。

要約すると:

  • 他のクラスをインポート可能にエクスポートし、デフォルト クラス CheckboxesController extends Controller;
  • 次に、他のコントローラーにクラスをインポートします。 import CheckboxesController from "controllers/checkboxes_controller";;
  • 次に、インポートされたコントローラーを使用して他のコントローラーを拡張します。export デフォルト クラス BulkActionsController extends CheckboxesController {}.

構文は Ruby にかなり似ていますが、より冗長であることがわかります (ただし、これは Ruby の非常にユニークな点です!)。

? 「JavaScript for Rails Developers」という本を出版する予定です。すでに50名以上の方にご予約いただいております。次はあなたでしょうか? ❤️

以上がスティミュラスコントローラーによる継承の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

ノードとHTTPコンソールを使用したHTTPデバッグ

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

See all articles