Techioz Blog

ボタンをクリックして親要素をバブルアップする方法はありますか?

概要

私が持っているコードは次のとおりです。

<div data-controller="eta">
...
  <div data-action="click->eta#advance" data-value="2hr">
    <%= button_to '2 Hours', set_eta_order_path(@order), method: :post, params: { ... } %>
  </div>
...
(repeated several times as a list)
</div>

ボタンはクリックすると機能しますが、イベントは div にバブルアップしないため、div のイベント ハンドラーは呼び出されません。

投票のオプションとしてこれらの div のリストがあり、それぞれをクリックすると次のページに進み、クリックした結果が保存されます。問題は、投票のページがほぼ完全にクライアントでレンダリングされ (ページごとに異なるルートが存在しない)、Stimulus.js で処理され、結果の保存がサーバーで行われることです。

このレイアウト自体と互換性を持たせる方法はありますか? そうでない場合、回避策はありますか?

解決策

データコントローラーを宣言する必要があります。

<div data-controller="eta">

  <div data-action="click->eta#advance" data-eta-time-param="1hr">
    <%= button_to "1 Hour", set_eta_order_path(@order) %>
  </div>

  <div data-action="click->eta#advance" data-eta-time-param="2hr">
    <%= button_to "2 Hours", set_eta_order_path(@order) %>
  </div>

</div>

// app/javascript/controllers/eta_controller.rb

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="eta"
export default class extends Controller {
  advance(event) {
    console.log(event.params);
  }
}