…at least streaming. Stimulus took a little while to get the hang of, but you had a handbook the explained just about everything - you just had to absorb it. If you look at the few Rails demos using Turbo there’s not much in the handbook that looks the same (turbo handbook is generic html - not Rails). There is also not much documentation for the hotwire-rails gem unless you can read/understand the documented code. I guess I’m not absorbing Turbo yet and I probably don’t need it - but I keep trying. I dusted off an old rails demo app I toyed with that was jQuey/coffeescript based and tried to replicate it using Turbo and a little stimulus.
- I have a simple model
Bingothat only has a few attributes. - The controller only has 3 actions and associated views :show, :edit, :update
- The show view is more or less a status view of the current game.
- A board displaying what numbers have been called
- Some stats on last and recent calls
- The edit view is almost the same as the show view but responds to clicks that trigger an update action
- Clicking on one of the 75 numbers will add or remove that number from the calls (attribute - serialized array)
- Clicking on a button in the button bar will trigger an update (patch form) that will change game state
My goal was to stream any changes made to the current game to anyone viewing the show view. I actually got it to semi-work trying various schemes I’ve seen in the chat demos.
class Bingo < Game
broadcasts
# resource :bingo, only: [:show, :edit, :update]
end
// _bingo.html.slim rendered from show.html.slim
#header.w3-white MY PROBLEM
= turbo_stream_from bingo
= turbo_frame_tag dom_id(bingo) do
#display.w3-row
#game-status = [nil,"Resume","New","Current","current"].include?(bingo.state) ? nil : bingo.state
- [['B',1],['I',16],['N',31],['G',46],['O',61]].each do |r|
- c = r[0].downcase
.square class="#{c}ltr npoint" = r[0]
- r[1].upto(r[1] + 14) do |i|
- id = "#{r[0]}#{i}"
- if bingo.calls.include?(id)
.square.num-on[id="#{id}" class="num-on#{c}"] = i
- else
.square.num-off[id="#{id}" class="num-off#{c}"] = i
= render partial: 'bingos/status', locals: {bingo: bingo}
// _edit.html.slim rendered from edit.html.slim
= turbo_frame_tag dom_id(@bingo,:caller) do
#display.w3-row[data-controller="callerBoard"]
#game-status = [nil,"Resume","New","Current","current"].include?(@bingo.state) ? nil : @bingo.state
- [['B',1],['I',16],['N',31],['G',46],['O',61]].each do |r|
- c = r[0].downcase
.square class="#{c}ltr npoint" = r[0]
- r[1].upto(r[1] + 14) do |i|
- id = "#{r[0]}#{i}"
- if @bingo.calls.include?(id)
.square.num-on(id="#{id}" data-callerBoard-target="toggle" data-action="click->callerBoard#clear" class="num-on#{c}") = i
- else
.square.num-off(id="#{id}" data-callerBoard-target="toggle" data-action="click->callerBoard#call" class="num-off#{c}") = i
= render partial: 'status', locals: {bingo: @bingo}
= render partial:"button_bar", locals:{bingo: @bingo}
The semi-works comment is that it appears to append the turbo-frame tag. The #header.w3-white MY PROBLEM outside the frame (added to debug) will double on every change and the html will scroll down. I’ve tried replacing the broadcasts in the model wih:
broadcast_replace_to target:"bingo_#{self.id}", partial: 'bingos/bingo', locals:{bingo:self}
on a after commit action and nothing happens. I can seen the html render in console, but the show view does not change. I also tried a couple respond_to.turbo_stream approaches and they also did not work.
I posted something similar a few weeks ago but was probably too vague and received zero response. Being able to stream from the model, or the controller and maybe from the turbo_stream_tag probably got me mixing apples and oranges. I have tried adding numerous stuff to the tags, tried what little I could find on broadcast_tos but the only thing that seems to semi-work is the broadcasts.
Any ideal what I’m not absorbing?