Rendering CSS with Data Attributes
Let's render CSS using the Data Attributes we created in the last lesson.
We'll cover the following...
Limitations to SortController
To show how versatile our SortController is, we’ll use it to fix a different problem with our schedule page. Right now, if we edit a concert on the page and change its start time, the concert page does not resort to insert the concert based on its new time.
This is admittedly a small problem, even by the standards of this sample app, but it has a neat solution, and it shows a technique based on Hey.com for leveraging Turbo and Stimulus that you may not have thought of.
This technique does re-sort the concerts without writing new JavaScript, but it requires unique CSS and breaks our calendar filters, which require a line or two of JavaScript to fix. We also lose our show/hide buttons for each day, but we can get them back if so desired.
Currently, the concerts are displayed in a nested loop. We have a list of days, we loop over each day, and then we loop the concerts on that day to display the page. We’ll replace that behavior with a simple list of concerts sorted by start time. Our sort controller can then handle the concert list. The problem with displaying the concerts in a single list, however, is that we lose our headers at the beginning of each day. We’re going to get them back by using plain old CSS.
Turbo Frames
First, we need to solve one problem. As written, each concert is wrapped in a Turbo Frame. When the Edit button is pressed, Turbo Frames changes the ...