Resources

Download Source Code

Summary

# Terminal
bin/rails g stimulus alert
bin/rails g stimulus something

# app/javascript/controllers/alert_controller.js
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="alert"
export default class extends Controller {
  connect() {
  }

  alert(message) {
    alert(message)
  }
}

# app/javascript/controllers/something_controller.js
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="something"
export default class extends Controller {
  static outlets = ["alert"]

  connect() {
  }

  clicked() {
    if (this.hasAlertOutlet) {
      this.alertOutlet.alert("something clicked")
      // this.alertOutlets.forEach( alert => alert.alert("something") )
    }
  }
}

# views/welcome/index.html.erb
<div data-controller="alert" class="message"></div>

<div data-controller="something" data-something-alert-outlet=".message">
  <%= button_tag "click me", "data-action": "something#clicked" %>
</div>