天亮了 昨晚是平安夜

關於迷霧森林故事

穿越

躺在草叢中的兩隻兔子似乎還有生命跡象
但卻一動也不動的躺在阿虎旁邊 叫也叫不醒
泰迪也暈頭轉向的從水池中爬了出來
螢幕上雜訊逐漸消失中
比賽依然繼續進行著

動物園派對

我們今天再往前走一小步
以前我們在處理js最常用的是remote:true
先整合 有空再回頭解釋
作法跟原本在處理AJAX 經常使用remote:true 並透過
escape_javascript 與選擇器來達成資料不重新整理的同步
DHH 在 去年底給了一個新魔法
在hotwire的幫助下，有機會可以不寫js就達成資料同步的結果
首先把controller的資料render成json

      # @room.save
      respond_to do |format|
        if @room.save
          format.html { redirect_to rooms_url, notice: 'Tweet was successfully created.' }
          format.json { render :show, status: :created, location: @room }
        else
          format.turbo_stream { render turbo_stream: turbo_stream.replace(@room, partial: "rooms/form", locals: { room: @room}) }
          format.html { render :new }
          format.json { render json: @room.errors, status: :unprocessable_entity }
        end
      end

在前端建立index.json.jbuilder讓hotwire可以與他溝通

/app/views/rooms/index.json.jbuilder

json.array! @rooms, partial: "rooms/room", as: :room

/app/views/rooms/_room.json.jbuilder

json.extract! room, :id, :name, :number_of_gamer, :board, :status, :created_at, :updated_at
json.url room_url(room, format: :json)

/app/views/rooms/_room.html.erb
<%= turbo_frame_tag dom_id(room) do %>
  <div class="">
    <div><%= room.name %></div>
  </div>
<% end %>

最後在房間列表也透過 turbo_stream_from打包起來

/app/views/rooms/index.erb
<h1>Rooms</h1>
<%= turbo_stream_from "rooms" do %>
  <%= render "rooms/form", room: @room %>
<% end %>

<%= turbo_frame_tag "rooms" do %>
  <%= render @rooms %>
<% end %>

這樣我們就可以透過turbo_stream_from顯示房間列表了

阿虎每日選幣

$XEC