Stimulus

コントローラー識別子を補完する

data-controller 属性内のコントローラー識別子は、対応する JavaScript コントローラーを参照します。 RubyMine はこの接続を解決し、プロジェクトで利用可能なコントローラーを提案します。

1. アプリ/ビュー/メッセージ/インデックス.html.erb 着信音をiPhone 着信音の wavファイルでダウンロード　葬送のフリーレンの主題歌『晴る』オープニングテーマをiPhone 着信音の wavファイルでダウンロードみんなで画像 を開き、その内容を次のコードに置き換えます:

   <h1>Clipboard</h1> <div data-controller=""> <p>Hello from Stimulus</p> <button type="button">Copy</button> <span></span> </div>

2. data-controller 属性の引用符の間にキャレットを置きます。 RubyMine は、利用可能な Stimulus コントローラー識別子を自動的に表示します。 リストが表示されない場合は、 Ctrl+Space を押します。

   

3. clipboard を選択します。 開始タグは次のようになります:

   <div data-controller="clipboard">

ターゲットとアクションを宣言して接続する

Stimulus コントローラーは、JavaScript でターゲットとアクションメソッドを宣言します。 RubyMine はこれらの宣言を使用して、ERB テンプレート内の対応するデータ属性を補完します。

このプロシージャでは、 clipboard コントローラーで二つのターゲットと一つのアクションを宣言します。 次に、補完を使用して アプリ/ビュー/メッセージ/インデックス.html.erb 着信音をiPhone 着信音の wavファイルでダウンロード　葬送のフリーレンの主題歌『晴る』オープニングテーマをiPhone 着信音の wavファイルでダウンロードみんなで画像 内の HTML 要素をそれらの宣言に接続します。

1. アプリ/JavaScript/コントローラー/クリップボード_コントローラー.js を開き、生成されたコントローラーを次のコードに置き換えます:

   import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["source", "status"] copy() { } }

   コントローラーは ソース と ステータス ターゲットを宣言し、 コピー アクションを公開します。 RubyMine はこれらの宣言を使用して、HTML および ERB テンプレートで補完を提供します。

2. アプリ/ビュー/メッセージ/インデックス.html.erb 着信音をiPhone 着信音の wavファイルでダウンロード　葬送のフリーレンの主題歌『晴る』オープニングテーマをiPhone 着信音の wavファイルでダウンロードみんなで画像 に戻り、開始 p タグ内で data- と入力し始めます。

3. 囲んでいる div に接続されているコントローラーに基づいて RubyMine が提案する data-clipboard-target を選択します。

   

4. 属性値内で補完を呼び出します。 RubyMine は、コントローラーの static targets 配列から命名を提案します。

   ソース を選択します。

   

5. 上記の手順を繰り返して同じ属性を span 要素に追加し、その値として ステータス を選択します。 行は次のようになります:

   <span data-clipboard-target="status"></span>

6. 開始 button タグで、 data-action 属性を追加し、 click->clipboard# と入力してコード補完を呼び出します。

   RubyMine は、 clipboard コントローラーで宣言されたアクションメソッドを提案します。

   コピー を選択します。

   

7. 完成した アプリ/ビュー/メッセージ/インデックス.html.erb 着信音をiPhone 着信音の wavファイルでダウンロード　葬送のフリーレンの主題歌『晴る』オープニングテーマをiPhone 着信音の wavファイルでダウンロードみんなで画像 ファイルは次のようになります:

   <h1>Clipboard</h1> <div data-controller="clipboard"> <p data-clipboard-target="source">Hello from Stimulus</p> <button type="button" data-action="click->clipboard#copy">Copy</button> <span data-clipboard-target="status"></span> </div>

ターゲットプロパティを補完する

static targets 宣言内の各命名に対して、Stimulus は対応する JavaScript プロパティを提供します。 RubyMine は、これらの派生プロパティをコントローラー内の補完に追加します。

このプロシージャでは、 コピー アクションを実装します。 ブラウザーの クリップボード API を使用して ソース ターゲットからテキストをコピーし、その後 ステータス ターゲットに確認を表示します。

1. アプリ/JavaScript/コントローラー/クリップボード_コントローラー.js を開き、空の コピー メソッドを非同期メソッドに変更します:

   async copy() { }

2. メソッド内に次を入力します:

   await navigator.clipboard.writeText(this.s

   この時点で、補完リストには static targets 宣言から派生した sourceTarget と statusTarget プロパティが含まれます。

   

3. sourceTarget を選択し、 .textContent で式を補完します:

   await navigator.clipboard.writeText(this.sourceTarget.textContent)

4. 次の行に this. と入力し、呼び出されたコード補完から statusTarget を選択して、確認テキストをその textContent プロパティに割り当てます。 このプロパティは、 static targets 内の ステータス 命名から派生します。

   完成したコントローラーは次のようになります:

   import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["source", "status"] async copy() { await navigator.clipboard.writeText(this.sourceTarget.textContent) this.statusTarget.textContent = "Copied" } }

値と CSS クラスを宣言して使用する

static values と static classes 宣言から、RubyMine は ERB テンプレート用の対応するデータ属性と JavaScript コード用のプロパティを派生します。

1. アプリ/JavaScript/コントローラー/クリップボード_コントローラー.js を開き、既存の targets 宣言の後に values と クラス 宣言を追加します:

   import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["source", "status"] static values = { message: String } static classes = ["success"] async copy() { await navigator.clipboard.writeText(this.sourceTarget.textContent) this.statusTarget.textContent = "Copied" } }

   コントローラーは、 メッセージ と命名された値と、 success と命名された論理 CSS クラスを宣言するようになりました。 これらの命名は、次のステップでの補完用のソース宣言を提供します。

2. アプリ/アセット/スタイルシート/アプリケーション.css を開き、コピー操作が成功したことを示す CSS クラスを追加します:

   .copied { color: green; }

3. アプリ/ビュー/メッセージ/インデックス.html.erb 着信音をiPhone 着信音の wavファイルでダウンロード　葬送のフリーレンの主題歌『晴る』オープニングテーマをiPhone 着信音の wavファイルでダウンロードみんなで画像 に戻り、 data-controller="clipboard" を含む開始 div タグで、 data-clipboard- と入力し始めます。

   RubyMine は、 data-clipboard-message-value と data-clipboard-success-class を含む、コントローラー宣言から派生した属性を提案します。

   

4. 両方の属性を選択し、その値を指定します。 完成したビューは次のようになります:

   <h1>Clipboard</h1> <div data-controller="clipboard" data-clipboard-message-value="Copied" data-clipboard-success-class="copied"> <p data-clipboard-target="source">Hello from Stimulus</p> <button type="button" data-action="click->clipboard#copy">Copy</button> <span data-clipboard-target="status"></span> </div>

   二つの属性は、 メッセージ と success 宣言を、このテンプレート内の値 コピー と コピー済み に接続します。

5. アプリ/JavaScript/コントローラー/クリップボード_コントローラー.js に戻り、ハードコードされた "Copied" 文字列を this. に置き換えます

   呼び出されたコード補完リストから、 static values 内の メッセージ エントリから RubyMine が派生した メッセージ値 を選択します。

   

6. 次の行に this.statusTarget.classList.add(this. と入力して、コード補完を再度呼び出します。

   static classes 内の success エントリから RubyMine が派生した 成功クラス を選択します:

   this.statusTarget.classList.add(this.successClass)

   最初に補完されたプロパティは確認テキストを提供します。 後者は、ステータス要素に適用される CSS クラスを提供します。

   完成したコントローラーは次のようになります:

   import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["source", "status"] static values = { message: String } static classes = ["success"] async copy() { await navigator.clipboard.writeText(this.sourceTarget.textContent) this.statusTarget.textContent = this.messageValue this.statusTarget.classList.add(this.successClass) } }

7. /messages/index を再読み込みし、 コピー をクリックします。 ページには data-clipboard-message-value の値が表示され、 data-clipboard-success-class で指定された CSS クラスが適用されます。

Stimulus 宣言に移動する

RubyMine は、ERB テンプレート内のターゲットの命名とアクション記述子を、Stimulus コントローラー内の宣言に解決します。

アプリ/ビュー/メッセージ/インデックス.html.erb 着信音をiPhone 着信音の wavファイルでダウンロード　葬送のフリーレンの主題歌『晴る』オープニングテーマをiPhone 着信音の wavファイルでダウンロードみんなで画像 で、次のいずれかを行います:

• data-clipboard-target 属性内の ソース または ステータス にキャレットを置き、 Ctrl+B を押します。 RubyMine は、 static targets 宣言内の対応する命名に移動します。

• clipboard#copy アクション記述子にキャレットを置き、 Ctrl+B を押します。 RubyMine は アプリ/JavaScript/コントローラー/クリップボード_コントローラー.js を開き、 コピー メソッドに移動します。

Stimulus アクションの名前を変更する

アクション記述子はコントローラーメソッドに解決されるため、メソッドの名前を変更するとテンプレート内の使用箇所が更新されます。 記述子を手動で見つけて編集する必要はありません。

1. アプリ/JavaScript/コントローラー/クリップボード_コントローラー.js で、 コピー メソッドにキャレットを置き、 Shift+F6 を押します。

2. 名前変更 ダイアログで、 copyText と入力し、 リファクタリング をクリックします。

   

3. リファクタリングプレビュー ツールウィンドウで、この名前変更によって影響を受ける アプリ/ビュー/メッセージ/インデックス.html.erb 着信音をiPhone 着信音の wavファイルでダウンロード　葬送のフリーレンの主題歌『晴る』オープニングテーマをiPhone 着信音の wavファイルでダウンロードみんなで画像 ファイル内で更新されるコードを確認し、 リファクタリング をクリックします。

   

   RubyMine はメソッドの名前を変更し、 アプリ/ビュー/メッセージ/インデックス.html.erb 着信音をiPhone 着信音の wavファイルでダウンロード　葬送のフリーレンの主題歌『晴る』オープニングテーマをiPhone 着信音の wavファイルでダウンロードみんなで画像 内の記述子を clipboard#copy から clipboard#copyText に更新します。