Multi Controller Communication

Hey Eric,

Yeah, communicating between 2 components might be tricky in Stimulus. Because DOM events always goes the next direction: from child elements to parents. In your exacmple you try to fire an event from the parent element so it won't hit the child one But not sure it will work either.. IIRC you fire that in a different direction and it just won't work in native Stimulus way.

But you can always dispatch real JS events like this, and it should always work:

// collection_controller.js
add() {
  const event = new CustomEvent('collection:added', {
    bubbles: true,
    detail: { timestamp: Date.now() },
  })

  // dispatch from the element you want the event to bubble from
  this.element.dispatchEvent(event)
}

and

// sortable_controller.js
connect() {
  this.element.addEventListener('collection:added', this.receivingEvent)
}

disconnect() {
  this.element.removeEventListener('collection:added', this.receivingEvent)
}

receivingEvent = (event) => {
  console.log('Got event:', event.detail)
}

This way it does not rely on Stimulus/DOM events and should work well.

Cheers!

Hey Victor,
thanks for your reply. I came up with my structure because I read that this.dispatch() "releases" the Event from the element where the controller is attached and can be caught at that element or any parent. That's why I put stimulus_action('sortable', 'receivingEvent', 'collection:added') right there. With this structure I tried stimulus_action('...', '...', 'collection:added@window') aswell to catch the event on the "top level", but failed.

It dawned on me, that my action is somewhat not working at all and I discovered, that it's not possible to use actions outside the controller scope they belong to. I'm not sure if it is never explicitly mentioned in the videos or if I just missed this part before, but that was my fundamental misconception.

I rearranged my code:

<div {{ stimulus_controller('collection') }}
        ...
>
    <ol class="..." {{ stimulus_controller('sortable')|stimulus_action('sortable', 'receivingEvent', 'collection:added@window') }}>
        ...
    </ol>
    <div ...><button type="button" ... {{ stimulus_action('collection', 'add') }}>Add</button></div>
</div>

And now everything works as expected.

One last question though: Is there any reason why it would be better (if it's possible) to avoid listening to events on the window-element?

Hey Eric,

Great, glad it works for you! And thanks for sharing the updated working structure :)

Yes, there are some reasons why you may want to avoid global events.

• Stimulus events are integrated into the lifecycle, i.e. when you connect/disconnect the controller - it automatically register/unregister those listeners
• Stimulus events are encapsulated
• Stimulus events may have better performance in theory, but it depends on how many events you have and on your HTML structure, but usually you may not notice any difference youself

I hope this helps!

Cheers!

Hey @Quentin-D

Have you tried what the docs say? It seems to me that they made part of Stimulus the useDispatch() behavior

Hey Kevin,

You only forgot to initialize the "dispatch" functionality. You can do it like this:

import { useDispatch } from 'stimulus-use';

export default class extends Controller {
    connect() {
        useDispatch(this);
    }
}

Cheers!

Hey MolloKhan,
Thank you, thought I might be missing something like that, so we still have to useDispatch in connect(), but you can call this.dispatch(). Ok, got it. Now I can see the event firing, but the data-action that's doing the listening doesn't seem to be catching the event because that controller method isn't executing. Is there reason you can think of why this wouldn't work in a modal?
Thanks,
Kevin

Hey Kevin,

Can you double-check that you're listening to the right event name? Stimulus prefix the event with the controller's name by default. https://github.com/stimulus-use/stimulus-use/blob/main/docs/use-dispatch.md#reference

Cheers!

Hey @jmsche!

I love that dispatch() is now just part of Stimulus. About debugging - good question. I haven't used this.dispatch() yet... I would hope that the events might show in the console via Stimulus's debugging mode, but it sounds like that's not the case, at least not now.

Fortunately, the events it dispatches are normal JS events. So you can use this trick: https://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-devtools

In the console, type:

monitorEvents($0)

// to stop monitoring
//unmonitorEvents($0)

Then you'll see ALL events that are dispatched. It's a lot, but it should help.

Let me know if that's useful! Cheers!

Hey Peter L.

The main idea of this chapter is to get the response of the AJAX call and dispatch an event that something else (a listener) can handle later. We achieved that by calling await right before the AJAX call. What it does is to resolve the promise and give you the result - it basically makes the process synchronous. After that, we just use the dispatch behavior to dispatch a custom event

I hope it helps. Cheers!

Hi! Here's how you can dispatch a CustomEvent as seen in the MDN website, where obj is an HTML element:

// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });


// create and dispatch the event
var event = new CustomEvent("cat", {
    detail: {
        hazcheeseburger: true
    }
});


obj.dispatchEvent(event);

In this case, the custom event is dispatches from obj and will bubble up to their parent elements!