Stimulus: Cross-Controller Coordination With Events

A controller is the basic organizational unit of a Stimulus application. They are instances of JavaScript classes that you define in your application. If you need controllers to communicate with each other, you should use events. Look at this to learn how.

Based on the DRY principle, sometimes we need to bind new elements to use an existing method or functionality across controllers. Stimulus offers a really easy way to do this.

For example:

app/javascript/controllers/home_controller.js:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [
    'homeLink',
  ]

  connect() {}

  openAlert() {
    alert('Test Message')
  }
}

app/views/home/index.html.erb:

<a href='#'
   data-controller='home'
   data-home-target='homeLink'
   data-action='click->home#openAlert'>Click me!</a>

Then, for this purpose, we are going to add a new page called test, and for that:

config/routes.rb

Rails.application.routes.draw do
  root 'home#index'
  get 'test', to: 'test#index'
end

app/javascript/controllers/test_controller.js:

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static targets = [
    'testLink',
  ]

  connect() {
  }

  openAlert(e) {
    alert('Test Message')
  }
}

app/views/test/index.html.erb:

<a href='#'
data-controller='test home'
data-test-target='testLink'
data-action='click->test#openAlert'>Click me test!</a>

Now to be able to call the openAlert method from home controller, instead of having the same method inside test controller, we need to do this:

app/views/test/index.html.erb::

<a href='#'
data-controller='test home'
data-test-target='testLink'
data-action='click->home#openAlert:test#openAlert'>Click me test!</a>

app/javascript/controllers/test_controller.js:

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static targets = [
    'testLink',
  ]

connect() {}

openAlert(e) {
    this.dispatch('openAlert', e);
  }
}

This is a really good feature which will help you to keep track of your method calls and your code cleaner as well. Long story short, this is one of the features that Stimulus offers, and it will make your life just easier, but, what do you think of it?

• Click here to go to the reference.