Communicating between controllers

I know this isn’t exactly an issue, but I think it is a good question. I think of your controllers as controllers for components on a page. How would you suggest to communicate between more controllers?

I have two components List (data rendered in a list) and ListFilter (bunch of selects and text inputs). List is loaded using AJAX. It should be reloaded every time ListFilter changes. I would like to use separate controllers for List and ListFilter to keep files small and organized.

So, how to trigger a List reload when ListFilter changes?

[georgeclaghorn]

From a Controller instance, you can call this.application.getControllerForElementAndIdentifier:

import { Controller } from "stimulus"

export default class ListFilterController extends Controller {
  // ...

  reloadList() {
    this.listController.reload()
  }

  get listController() {
    return this.application.getControllerForElementAndIdentifier(this.element, "list")
  }
}

[sstephenson]

We don’t have anything built in for this right now. The easiest thing to do is probably to emit a DOM event from the inner controller and observe it with an action from the outer controller.

What I would like to see eventually is a data-outlet attribute that connects delegate properties on a child controller directly to a containing element’s controller. Something like Interface Builder outlets in Cocoa.