iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 15
1
Modern Web

為你自己學 Ruby on Rails系列 第 15 篇

第 14 章 - Layout, Render 與 View Helper

2017鐵人賽 rails ruby ror
2979 瀏覽

本系列文章內容同步發佈於這裡，若有任何問題或錯誤，都歡迎直接到 GitHub 上發 PR 修正，或是在這裡留言討論。

Layout, 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: "delete", data: { confirm: "確認刪除" } %>
      </td>
    </tr>
    <% end %>
  </tbody>
</table>

在這個檔案裡，看不到任何 <html>、<title> 或 <body> 之類的 HTML 標籤，但檢視實際網頁的原始碼又都有，這是怎麼回事呢?

yield

以這個例子來說，Controller 在處理 View 的時候，並不只是單純的只取用 index.html.erb，而是會先取用 Layout 檔案的內容(預設是 app/views/layouts/application.html.erb)，然後把 index.html.erb 的內容填到 <%= yield %> 裡。

http://ithelp.ithome.com.tw/upload/images/20161230/20065770jq2i1NJmH2.png

版型的好處，就是不需要重複的寫一堆長得一樣的 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-track': 'reload' %>
  </head>

  <body>
    <div class="container">
    <%= yield %>
    </div>
  </body>
</html>

這裡有幾行需要說明一下：

  1. csrf_meta_tags 方法會在頁面上產生 <csrf-param> 跟 <csrf-token> 兩個 <meta> 標籤，用途主要是確保網站較不容易受到 CSRF (Cross-site request forgery) 攻擊。
  2. stylesheet_link_tag 方法會轉換成 CSS 的 <link rel="stylesheet"> 標籤。
  3. javascript_include_tag 方法會轉換成 JavaScript 的 <script> 標籤。

CSRF 攻擊?

CSRF (Cross-site request forgery) 中文翻譯成「跨站請求偽造」。通常 CSRF 攻擊的目的不一定是直接獲取使用者帳戶的控制權或個資，但可以用其它使用者的名義執行某些操作。

舉個例子來說，假設我想攻擊某個 Blog 平台，我可能可以猜到後台的路徑，例如對 /admin/posts/2 路徑發送 DELETE 方法，就可以刪除編號 2 號的文章。雖然我沒有這個網站後台的使用權限，但我知道 A 先生有，所以我就假裝寄一封「恭喜你，你得到了 iphone 7」的信件給 A 先生，但事實上這個連結點下去就是會對 /admin/posts/2 網址發送 DELETE，這樣那篇文章就藉由 A 先生的權限被刪除了!

只能一個版型嗎?

如果你喜歡，可以有多種款式的版型，預設的版型是 app/views/layouts/application.html.erb。例如我想要增加一款後台專用的版型，可以在 app/views/layouts/ 目錄下新增一個 backend.html.erb，內容如下：

<!DOCTYPE html>
<html>
  <head>
    <title>網站管理系統</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <h1>我是後台</h1>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

要套用版型有幾種用法：

1. 整個 controller 都套用同一個版型

在 Controller 裡使用 layout 方法：

class CandidatesController < ApplicationController
  layout "backend"

  # ...[略]...
end

這樣整個 Controller 的頁面在處理的時候就都會套用 backend 版型了。

2. 只有某個 Action 套某個版型

在特定 Action 裡使用 render 方法：

class CandidatesController < ApplicationController

  def index
    @candidates = Candidate.all
    render layout: "backend"
  end

  # ...[略]...
end

這樣就只有這個 index 的頁面會套用 backend 版型，其它沒特別交待的還是會用預設版型。

3. 如果都不要?

如果因為某些原因，完全不想套任何版型，在 Controller 可以這樣寫：

class CandidatesController < ApplicationController
  layout false

  # ...[略]...
end

在特定 Action 可以這樣：

class CandidatesController < ApplicationController

  def index
    @candidates = Candidate.all
    render layout: false
  end

  # ...[略]...
end

預設版型?

前面提到說預設的版型是 app/views/layouts/application.html.erb，這句話其實不完全正確。真正的預設版型應該是「跟 Controller 同名」的版型。

舉例來說，有個 Controller 叫做 CandidatesController，它的版型檔案其實是會先到 app/views/layouts/ 目錄下找 candidates.html.erb 檔案，如果找不到才換找 application.html.erb。

只能一個 yield 嗎?

這個 yield 就是用來填空的坑，不一定只有一個，想要的話也可以有很多個，而且還可以幫這些坑標記名字：

<!DOCTYPE html>
<html>
  <head>
    <title><%= yield :my_title %></title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class="container">
    <%= yield %>
    </div>
  </body>
</html>

除了原本的 <%= yield %> 之外，另外在 <title> 標籤裡加上 <%= yield :my_title %>，意思就是把這個坑標記成 my_title。要填這個指定名字的坑的話，有兩種做法：

使用 provide

你可以使用 provide 方法，指定要幫 my_title 提供資料：

<% provide :my_title, "你好，我是 Title" %>

<h1>候選人列表</h1>

<%= link_to "新增候選人", new_candidate_path %>

<table class="table">
  <thead>
    <tr>
      <td>投票</td>
      <td>候選人姓名</td>
...[略]...

使用 content_for

或是使用 content_for 來填坑：

<% content_for :my_title do %>
你好，我是 Title
<% end %>

<h1>候選人列表</h1>

<%= link_to "新增候選人", new_candidate_path %>

<table class="table">
  <thead>
    <tr>
      <td>投票</td>
      <td>候選人姓名</td>
...[略]...

不管哪一種方式都可以，檢視原始碼就可以發現填坑的效果了：

http://ithelp.ithome.com.tw/upload/images/20161230/20065770aotE03TYGk.png

局部渲染 (Partial Render)

局部渲染是一種在 Rails 專案很常見的程式碼整理手法之一。在前一個章節整理表單的時候，有用到了這樣的寫法：

<%= render "form" %>

其實完整的寫法是這樣寫：

<%= render partial: "form" %>

但用前面簡單的寫法在這邊也是可以的。這行的意思是會去同一個目錄找 _form 這個檔案，並且把檔案內容安插在這個地方。注意這個檔案必需要是底線開頭的，否則會出現 ActionView::MissingTemplate 的錯誤訊息：

http://ithelp.ithome.com.tw/upload/images/20161230/20065770nuUdD0HXiX.png

通常局部渲染適用於「可以重複使用」的程式碼，像是在上個章節的表單就是一例。

較好的設計

雖然 <%= render "form" %> 這樣短短一行很容易用，但這樣不見得是個好的設計。一個容易重複使用的局部樣版，不應該依類滿天飛的實體變數。舉個例子來說，如果想要做一個叫做橫幅廣告的局部樣版，可能會這樣寫(檔案名稱 _banner.html.erb)：

<div class="advertisement">
  <div>廣告</div>
  <div> <%= @content %> </div>
</div>

使用的時候這樣用：

<%= render "banner" %>

也就是說，這個 _banner.html.erb 會自己去空氣中抓看看有沒有 @content 這個實體變數給它，有的話就印出來。但事實上不是每個頁面都有這東西可以抓，所以不見得容易重複使用。比較建議的設計會是這樣：

<div class="advertisement">
  <div>廣告</div>
  <div> <%= content %> </div>
</div>

讓這個局部樣版裡只有一般的區域變數，然後在使用它的時候，把值傳主動傳給它：

<%= render partial: "banner", locals: {content: "我是廣告的內容"} %>

這個局部樣版就會得到一個 content 的區域變數。這樣做似乎變得之前更麻煩，但這樣的設計可以讓這個局部樣版變得更像一個「元件」，它會被動的等著你餵它資料，而不是自己伸手去空中抓，這樣一來不管在哪個頁面都可適用。

注意：這樣的寫法 partial 就不能省略了。

魔術 render

在上一章的「候選人列表」的程式碼中，中間有一段 each 迴圈，不斷的印出資料，這段如果使用局部樣版來整理的話，可以改成這樣：

<h1>候選人列表</h1>
...[略]...
  <tbody>
    <%= render partial: "candidate" %>
  </tbody>
</table>

所以，在 app/views/candidates 目錄底下應該可以預期有個 _candidate.html.erb：

<% @candidates.each do |candidate| %>
<tr>
  <td><%= link_to "投給這位", vote_candidate_path(candidate), method: "post", data: { confirm: "確認要投給這位候選人嗎?!" }, class:"btn btn-danger btn-xs" %></td>
  <td><%= candidate.name %>(年齡：<%= candidate.age %> 歲)</td>
  <td><%= candidate.party %></td>
  <td><%= candidate.politics %></td>
  <td><%= candidate.votes %></td>
  <td>
    <%= link_to "編輯", edit_candidate_path(candidate) %>
    <%= link_to "刪除", candidate_path(candidate), method: "delete", data: { confirm: "確認刪除" } %>
  </td>
</tr>
<% end %>

這感覺沒什麼了不起的，就是把原來的內容整個剪到另一個局部樣版裡而已，它需要的 @candidates 實體變數也還是自己往空中抓，前面才剛講這樣不是好的設計。的確，如果只是這樣的話其實也不需要做了。Rails 針對這樣的用法，有加了一個 collection 的參數：

<%= render partial: "candidate", collection: @candidates %>

然後 _candidate.html.erb 檔案的內容可以把外層的 each 迴圈拿掉，變成這樣：

<tr>
  <td><%= link_to "投給這位", vote_candidate_path(candidate), method: "post", data: { confirm: "確認要投給這位候選人嗎?!" }, class:"btn btn-danger btn-xs" %></td>
  <td><%= candidate.name %>(年齡：<%= candidate.age %> 歲)</td>
  <td><%= candidate.party %></td>
  <td><%= candidate.politics %></td>
  <td><%= candidate.votes %></td>
  <td>
    <%= link_to "編輯", edit_candidate_path(candidate) %>
    <%= link_to "刪除", candidate_path(candidate), method: "delete", data: { confirm: "確認刪除" } %>
  </td>
</tr>

因為傳了 collection 參數的關係，在局部樣版裡即使拿掉了 each 迴圈，它還是可以正常運作，而且呈現的畫面還是跟原來的一樣。這樣一來，在 _candidate.html.erb 檔案裡的都只剩區域變數，不需要再依賴空中的實體變數。

還可以再短一點，把這一行：

<%= render partial: "candidate", collection: @candidates %>

直接改成這樣：

<%= render @candidates %>

_candidate.html.erb 檔案不需要改，整個還是可以正常運作。短短一行，而且還不用寫迴圈就可以達到跟原來用 each 迴圈一樣的效果，很神奇吧!

但這樣的寫法其實有點過於魔術，而且依賴不少 Rails 裡的「慣例」，如果要讓 ``<%= render @candidates %>` 可以正常運作的話，需要：

  1. 局部樣版的檔名必須是那包資料的「單數」，而且放在對的位置，例如檔名必需是 _candidate.html.erb，而且放在 app/views/candidates 裡。
  2. 局部樣版裡不需要寫迴圈(寫了反而會多跑一層迴圈)，裡面用到的區域變數必須是單數，例如 candidate。

如果沒有按照這些慣例就會出現錯誤訊息。

View Helper

除了上面提到的局部樣版，View Helper 也是用來整理程式碼很常用的手法。其實平常大家在寫的 link_to、image_tag 或是 form_for，它都是一種 View Helper。

雖然 View Helper 通常是寫在 View 的 HTML 標籤裡，但其實 View Helper 本身是標準的 Ruby 程式碼，使用起來就跟在呼叫一般的 Ruby 方法一樣。

自定 View Helper

除了 Rails 內建的方法，有時候在專案中也會寫一些自己會用的方法，例如可能有一段程式碼長這樣：

<tr>
  <td>
    <% if gender == 1 %>
      男
    <% elsif gender == 0 %>
      女
    <% else %>
      不想說
    <% end %>
  </td>
</tr>

當 gender 的值是 1 的時候印出 男，是 0 的時候就印出 女，不然就印出 不想說。雖然像這樣的寫法很簡單也很直覺，但這樣就會讓 View 開始有一些邏輯判斷了，這不是好事。View 的主要用途是輸出結果在畫面上，邏輯判斷越少越好。像上面這個例子，我們就可以把這段 if .. else 判斷，搬到 View Helper 放著。

View Helper 主要是放在 app/helpers 目錄裡。要寫在哪個檔案裡都可以(因為所有的 View Helper 都可以被 Rails 載入)，但通常會放在跟功能有關的檔案裡。這裡我直接先放在 app/helpers/application_helper.rb 裡面：

module ApplicationHelper
  def user_gender(gender)
    if gender == 1
      "男"
    else
      "女"
    end
  end
end

View Helper 是定義在模組裡，Rails 在啟動的時候會把這些 Helper 都 include 進來，讓大家在 View 可以開心使用。如上面這個例子，我在 ApplicationHelper 這個模組裡定義了一個 user_gender 方法，這個方法可以接收一個參數，並根據參數的內容回傳「男」或「女」。然後原來在 View 的那段邏輯判斷就可以改成這樣：

<tr>
  <td><%= user_gender(gender) %></td>
</tr>

讓 View 的程式碼變得乾淨又清楚。

讓原本的 Helper 更好用

其實內建的 View Helper 很好用，但偶爾會有另外再加一些料，像是想要在 link_to 超連結的前面加上一個小 icon，你可能會這樣寫：

<h1>候選人列表</h1>

<%= link_to "<span class='glyphicon glyphicon-knight'>新增候選人</span>", new_candidate_path %>

結果你會得到這樣的畫面：

http://ithelp.ithome.com.tw/upload/images/20161230/200657700RiNGdpxC5.png

link_to 方法把 HTML 標籤「完整」的呈現在畫面上了，這應該不是你想要的! 這是因為 link_to 後面接的那個字串會自動被逸出(escape)，除非你使用 .html_safe 方法，主動告訴它說「這個字串是安全的」：

<h1>候選人列表</h1>

<%= link_to "<span class='glyphicon glyphicon-knight'>新增候選人</span>".html_safe, new_candidate_path %>

這樣就會正常了：

http://ithelp.ithome.com.tw/upload/images/20161230/20065770NKIO14e5x0.png

但這樣看起來有點囉嗦，所以如果這樣的寫法常用的話，我會建議把它包成 Helper：

module ApplicationHelper
  def icon_link_to(label, path, icon)
    link_to path do
      content_tag :span, class: "glyphicon glyphicon-#{icon}" do
        label
      end
    end
  end
end

在自己定義的這個 icon_link_to 方法裡，除了使用了原本的 link_to 之外，也再加上 content_tag 這個內建的 Helper 來包標籤，好處是這樣就不需要自己再加 .html_safe 了。原來的 View 就可以這個剛寫好的 icon_link_to 方法：

<h1>候選人列表</h1>

<%= icon_link_to "新增候選人", new_candidate_path, "knight" %>

除了看起來比原來的 link_to 簡單、乾淨外，在全站每個有需要的 icon 的連結也都可以使用，相當便利。

本系列文章內容同步發佈於這裡，若有任何問題或錯誤，都歡迎直接到 GitHub 上發 PR 修正，或是在這裡留言討論。


上一篇
第 13 章 - CRUD 分解動作 - 簡易票選系統實作
下一篇
第 15 章 - Model 基本操作
系列文
為你自己學 Ruby on Rails 共 30 篇
  1. 26
    第 25 章 - 購物車 Part 1
  2. 27
    第 26 章 - 購物車 Part 2
  3. 28
    第 27 章 - 訂單處理
  4. 29
    第 28 章 - 金流串接(使用 Paypal)
  5. 30
    第 29 章 - 網站部署(使用 Heroku)
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙