iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
自我挑戰組

Ruby on Rails JS系列 第 21

Layout, Render 與 View Helper

版型(Layout)
局部渲染(Partial Render)
View Helper
在上個章節介紹了 CRUD 的分解動作並實作了⼀個簡單的投票系統,接下來這個章
節要花點時間介紹在 Rails 專案 MVC 架構的 V。
版型 Layout
隨便打開⼀個在 app/views ⽬錄裡的檔案,例如上個章節的候選⼈列表⾴⾯:

<h1>候選⼈列表</h1>
<%= link_to "新增候選⼈", new_candidate_path %>
<table class="table">
<thead>
<tr>
<td>投票</td>
...[略]...
<td>
<%= link_to "編輯", edit_candidate_path(candidate) %>
<%= link_to "刪除", candidate_path(candidate), method: "de
lete", data: { confirm: "確認刪除" } %>
</td>
</tr>
<% end %>
</tbody>
</table>

在這個檔案( index.html.erb )裡,看不到任何 <html> 、 <title> 或<body>
之類的 HTML 標籤,但檢視實際網⾴的原始碼⼜都有,這是怎麼回事呢?
yield
以上⾯這個例⼦來說,Controller 在處理 View 的時候,並不只是單純的只取⽤
index.html.erb 這個檔案,⽽是會先取⽤ Layout 檔案的內容(預設是
app/views/layouts/application.html.erb ),然後把 index.html.erb 的
內容填到 <%= yield %> 裡。
版型的好處,就是不需要重複的寫⼀堆長得⼀樣的 HTML 標籤,例如每個⾴⾯的⾴
⾸跟⾴尾通常不會有什麼變化,這種就是版型適⽤的地⽅。讓我們看⼀下
app/views/layouts/application.html.erb 的內容:

<!DOCTYPE html>
<html>
<head>
<title>MyCandidates</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data
-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-tr
ack': 'reload' %>
</head>
<body>
<div class="container">
15 Layout,Render 與 View Helper
224
<%= yield %>
</div>
</body>
</html>

這裡有幾⾏需要說明⼀下:

  1. csrf_meta_tags ⽅法會在⾴⾯上產⽣ 跟
    兩個 標籤,⽤途主要是確保網站較不容易受到 CSRF(Cross-site
    request forgery)攻擊。
  2. stylesheet_link_tag ⽅法會轉換成 CSS 的
    標籤。
  3. javascript_include_tag ⽅法會轉換成 JavaScript 的 標籤。

參考資料

[為你自己學Ruby on Rails]https://railsbook.tw/chapters/08-ruby-basic-4.html


上一篇
Ruby on Rails CRUD 之 D(Delete)
下一篇
Ruby on Rails CSRF 攻擊是什麼?
系列文
Ruby on Rails JS29

尚未有邦友留言

立即登入留言