Better Stimulusガイド:アーキテクチャ4: 名前空間化された属性（翻訳）

🔗 名前空間化された属性

Good

<!-- index.html -->
<input data-controller="filter" data-filter-param-category="cats" data-filter-param-rating="5" data-filter-param-color="black" type="text" data-action="input->filter#update">

// filter_controller.js
import { Controller } from "stimulus";

export default class extends Controller {
  update () {
    const url = new URL(window.location)
    Object.keys(Object.assign({}, this.element.dataset))
      .filter(attr => attr.startsWith("filterParam"))
      .forEach(attr => {
        url.searchParams.set(
          attr.slice(11).replace(/^\w/, c => c.toLowerCase()),
          this.element.dataset[attr]
        )
      })
    history.pushState({}, '', url.toString())
  }
}

そうする理由

「コンフィグ可能なコントローラ」の例のように構築を進めていると、 コントローラの名前空間だけではなく、パラメータとして識別される名前空間となる任意の属性セットも使いたくなるかもしれません。

残念ながらStimulus では、利用可能な属性の一覧を取得したり、名前空間に関する条件を追加で指定したりすることは簡単にできません。Stimulusのdata-*アクセサをいったん完全にバイパスして、まずコントローラ要素のデータセットをJSオブジェクトに変換してから、そのキーの配列を出力します。data-filter-param-*という名前の属性のみを保持し、それらの属性をURLクエリ文字列に含めるために、基本名のみ残して切り詰めます。

注意: sliceに渡す値は、コントローラの識別子（コントローラ名）の長さを考慮して調整する必要があります。

Codesandboxのサンプル

関連記事

Better Stimulusガイド:アーキテクチャ（1）アプリケーションコントローラ（翻訳）