Using Gon in Stimulus

Building up a controller

Now we can use the JavaScript global variable, which has the contents of our gon item, in our code by building up a Stimulus controller that reads from it. We need to add a little extra code to make sure TypeScript is okay with an unstructured global variable, since TypeScript is normally all about not being okay with unstructured global variables.

In Stimulus terms, we want a controller that will have one value (the id of the concert) and one target (the text that currently says “On Sale”). That’s three changes to the existing ERb file in app/views/schedules/show.html.erb. In keeping with the idea that Stimulus controllers should cover as little of the page as possible, we’ll set this one up inside the loop that displays concerts, where there’s an article tag for each concert, like so: