刺激を使用しているレールで削除確認ダイアログを示す方法

Turboを使用するRailsの最新バージョンに切り替えた場合は、項目を削除すると確認ダイアログが表示されないことに気付きました.刺激を使用して削除確認ダイアログを表示する方法を説明します.

刺激
あなたが働いていないならばStimulus 以前は、Hotwire(HTML over Wire)フロントエンドフレームワークスタックの一部であるベースキャンプからのJavaScriptフレームワークです.刺激の主な目的は、サーバーによってレンダリングされた静的なHTMLを強化することですconvention-over-configuration .
刺激は、DOM要素をコントローラを使用してJavaScriptオブジェクトに接続し、DOMイベントをアクションを使用してJavaScriptメソッドにフックします.HTML要素の単純な属性を使用します.
コントローラ
コントローラは、DOM要素をJavaScriptオブジェクトに接続しますdata-controller 属性.JavaScriptオブジェクトには、DOM要素に追加する動作とロジックが含まれます.
刺激は連続的にページをモニターしますdata-controller 表示する属性.一度、それがある要素を見つけたらdata-controller 属性は、対応するコントローラクラスを見つけるために値をチェックします.そのクラスの新しいインスタンスを作成し、要素に接続します.
たとえば、あなたのHTMLがこれを含むと仮定しましょうdiv による要素data-controller 属性.

<div data-controller="books">
   <p>Book</p>
</div>

刺激がこのDOM要素を見つけると、books_controller.js ファイル.

// src/controllers/books_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
}

ファイル名のマッピングにこのプロセスの詳細を学ぶことができますStimulus installation guide .
アクション
アクションはDOMイベントをコントローラメソッドに接続しますdata-action 属性.
我々のDOM要素にボタンを加えましょうdata-controller 属性.

<div data-controller="books">
   <p>Book</p>
   <button data-action="click->books#read">Start Reading</button>
</div>

The data-action 値click->books#read はアクション記述子と呼ばれます.

click イベント名

books コントローラ名

read を呼び出す方法

The data-action="click->books#read" 刺激を指示します.ユーザーがこのボタンをクリックすると、read メソッドbooks_controller .

// src/controllers/books_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    read() {
         // start reading the book
    }
}

The Stimulus handbook CSSスタイルに接続するHTMLクラスにこのアプローチを比較します.

Just like the class attribute is a bridge connecting HTML to CSS, Stimulus’s data-controller attribute is a bridge connecting HTML to JavaScript.

Data attributes help separate content from behavior in the same way CSS separates content from presentation.

方法の刺激の基本的な導入で、ユーザーが削除ボタンをクリックしたときに確認ダイアログを表示するという我々の問題を解決する方法を見てみましょう.
ここでは、各書籍の削除ボタンを使用して本を表示するコード例です.

ステップ1:Aを加えるdata-controller 親HTMLタグへの属性

ステップ2:Aを加えるdata-action ボタンへの属性

ステップ3:刺激コントローラを追加する

それです.をクリックするとdelete ボタンは、刺激を最初に呼び出すdelete メソッドbooks_controller.js ファイル.このメソッドは、確認プロンプトを表示し、ユーザーがcancel オプション.
そして、それはあなたがレールで刺激を使用して確認プロンプトを表示する方法です.
注意:ダイアログを使用して確認ダイアログを追加する簡単な方法がありますturbo-method and turbo-confirm データ属性は以下のようになります:

<%= link_to "delete", book, data: { turbo_method: :delete, turbo_confirm: "Are you sure?" } %>

しかし、この解決策はRailsがHTTPで同じページにあなたをリダイレクトしようとする問題になりますdelete エラーの原因となるメソッドです.Gorailsからのクリスオリバーは、最近、これを詳細に説明しました、そして、また、回避策を示します.
私はそれが助けてほしい.任意のミスを見つけるか、または任意のフィードバックをしている場合は、コメントでお知らせください.