[第十七只羊] 迷雾森林舞会XI 套用turbo_frame_tag

天亮了 昨晚是平安夜

关於迷雾森林故事

穿越

躺在草丛中的两只兔子似乎还有生命迹象
但却一动也不动的躺在阿虎旁边 叫也叫不醒
泰迪也晕头转向的从水池中爬了出来
萤幕上杂讯逐渐消失中
比赛依然继续进行着

动物园派对

我们今天再往前走一小步
以前我们在处理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