Having an outer controller that controls inner controller

[happysalada]

I have a tabbed interface (I use the tabbed interface controller example provided)
On each of my tabs I have charts though. I would like that when the tabs shows up, the charts render at the same time.
I am guessing that I need to have my tabs controller call my smaller charts element controller. I’m not sure if it’s a good idea to call a controller from another one.

Anybody has an idea of what is best to do here ?

[savroff]

We right now have this thing. Connection method in our ApplicationController wrapper. I already posted it in common patterns:

  /**
   * Get instance of remote controller
   * @param controller - controller name
   * @param id - instance element ID
   */
  connectRemote(controller, id = null) {
    const elementId = id || controller
    const element = document.getElementById(elementId)
    return this.application.getControllerForElementAndIdentifier(element, controller)
  }

This case you can fire action on tab content controller via tab button for example.
Adrien showed another example. Please feel free what you like here:

Common patterns?

Here is a bit of code that was given to me by @nowhereman. getControllerByIdentifier(identifier) { return this.application.controllers.find(controller => { return controller.context.identifier === identifier; }); } It works well but only for a child controller to find its parent controller. It also assumes that there is only one parent controller on the same page. I agree that those helper functions can be placed in a common ApplicationController and extend all your controllers from t…

I think it’s no issues to call another controller inside a controller. We don’t build super-duper-reusable single responsibility components, we solving a real problem on the specific page.
At least this is my point when I use Stimulus

[happysalada]

How about firing a custom event on the target and then adding an event handler in the target controller. Something like adding this

this.panelTarget.dispatchEvent(new Event('update'))

into the parent controller

and then in the controller associated with the panel have something like this

update() {
    ... /* add your update logic here */
  }

in the child controller. With this as an attribute

data-action="update->trades-tab#update"

(just a thought, I’m not sure how I feel about each)

[adrienpoly]

Using custom event was one of the recommendations of Sam in an earlier discussion on Github

Issue: Communicating between controllers

[valorin]

How would you pass extra data along with the custom event?

I’ve tried: .dispatchEvent(new Event('update', data)), but it doesn’t seem to be sent…

[adrienpoly]

@valorin

I’ve tried: .dispatchEvent(new Event(‘update’, data)), but it doesn’t seem to be sent…

using CustomEvent does work for me to pass additionnal data through the event .dispatchEvent(new CustomEvent('update', { detail: data }))

[valorin]

Ah nice, thanks! I didn’t know about CustomEvent.