DEV Community

Cover image for Rails 6, Stimulus  events
Ronak Bhatt for Main Street

Posted on • Edited on

7 2

Rails 6, Stimulus events

An action is a connection between:

  • a controller method
  • the controller’s element
  • a DOM event listener

gallery_controller.js

// controllers/gallery_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  next(event) {
    alert("Justclick !!! :")
  }
}
Enter fullscreen mode Exit fullscreen mode
View File Setup
<div data-controller="gallery">
  <button data-action="click->gallery#next">…</button>
</div>
Enter fullscreen mode Exit fullscreen mode
Descriptors

The data-action value click->gallery#next is called an action descriptor. In this descriptor:

  • click is the name of the DOM event to listen for
  • gallery is the controller identifier
  • next is the name of the method to invoke
The full set of these shorthand pairs is as follows:

Screenshot 2020-10-27 at 6.24.03 PM

I hope that helps someone. Thanks :).

Thanks for reading. 🙂

I’d love to hear thoughts or comments around this. Feel free to email me at ronakabhattrz@gmail.com or hit me up on twitter, @ronakabhattrz.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️