Stimulus: Show example of multiple controllers on an element in the documentation

Created on 13 Jun 2018 · 2Comments · Source: hotwired/stimulus

It took a while for me to find out how to use multiple controllers on a single element as I can't find it documented anywhere. Maybe I'm just blind?

Let's say I have two controllers: toggle and track on the same element, you separate them with a space:

<a data-controller="toggle track" data-action="click->toggle#click click->track#click">

Source

bolmaster2

👍1

Most helpful comment

It’s mentioned somewhat abstractly in The Handbook here:

Stimulus works by continuously monitoring the page, waiting for the magic data-controller attribute to appear. Like the class attribute, you can put more than one value inside it. But instead of applying or removing CSS class names, data-controller values connect and disconnect Stimulus controllers.

We’ll consider adding a more concrete example next time we update the docs. Thank you for the feedback!

javan on 13 Jun 2018

👍3

All 2 comments

It’s mentioned somewhat abstractly in The Handbook here:

Stimulus works by continuously monitoring the page, waiting for the magic data-controller attribute to appear. Like the class attribute, you can put more than one value inside it. But instead of applying or removing CSS class names, data-controller values connect and disconnect Stimulus controllers.

We’ll consider adding a more concrete example next time we update the docs. Thank you for the feedback!

javan on 13 Jun 2018

👍3

I had similar problems trying to find out how you added multiple actions to a single element - it'd be really handy to have it in the documentation.

It's quite obvious when you see it written down, which is something I love about stimulus - it's all very natural to use, I don't really need to think too much about what the right syntax is :)