Rails 把 Ajax 變簡單了 (撈資料)

最近遇到一個困難，事情是這樣的…
我想要點擊留言的icon就可以看到某個項目(item)中所有的留言(post)，但不要跳轉新畫面，目標在目前的畫面上跳出一塊區域顯示留言有什麼就好了，我可以這麼做…

step 1 寫一個Action

在既有的 item_controller 寫一個 action，把留言藏在這個地方。
需要「用 item_id 撈出資料，以最新時間做排序，一次只先撈 50 筆」

# item_controller.rb
def posts
  @item = Item.find(params[:id])
  @posts = @item.posts.order(created_at: :desc).limit(50)
end

step 2 Route 設計

我需要一個路徑長這樣 items/item_id/posts
所以在 item 之下用 member 長一條路徑

# routes.rb
resources :items, shallow: true do
  member do
    get :posts
  end
end

step 3 在 Html 給予連結和空間

在想要的畫面中給一個連結，再準備一個空間
邏輯：預設是關閉的，點擊時加入新的class，把空間打開
(重點在第 6、12 行)

remote: true 這樣ujs就會知道要發非同步請求了













<!-- group.html.erb -->
<% @items.each do |item| %>
  <% if group.id == item.group_id %>
    ( 略 )
    <td>
      <%= link_to 'postIcon', posts_item_path(item), remote: true %>
    </td> 
  <% end %>
<% end %>


<div id="posts-block" style="width:200px;height:500px"></div>

step 4 Partial File

資料透過實體變數都帶過來，在這邊取出需要的資料和排版設計

<!-- _posts.html.erb -->
<div class="posts-container">
  <% @posts.each do |post|%>
    <div class="post"><%= post.content %></div>
  <% end %>
</div>

step 5 Partial Render

JQuery 寫法，先抓到剛剛在第三步驟 Html 裡預計放置留言的空間，再用 JS 的方式把第四步驟的畫面丟進去渲染

# posts.js.erb
$('#posts-block').html("<%= j render('items/partials/posts') %>")

j render 自動跳脫字元，避免引號發生錯誤

資料補充：
Ruby on Rails — ujs— AJAX
Rails為何要使用escape_javascript?
Rails - AJAX 小技巧

Select a repo